Vue 使用setInterval定时器导致前端页面卡死(解决方法)

Vue 使用setInterval定时器导致前端页面卡死

在这里插入图片描述

在这里插入图片描述

原因

setinterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死你的网页。
其原因与JS引擎线程有关(需深入研究JS引擎线程) ,但是setTimeout是自带清除定时器的。

解决方案

  mounted() {
    this.getList();
    if (this.timer) {
      clearInterval(this.timer);
    } else {
      this.timer = setInterval(() => {
        setTimeout(this.getList(), 0);
        // console.log("刷新" + new Date());
      }, 10000);
    }
    this.$once("hook:beforeDestroy", () => {
      clearInterval(this.timer);
    });
  },

最近更新

  1. TCP协议是安全的吗?

    2024-06-17 20:40:04       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-17 20:40:04       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-17 20:40:04       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-17 20:40:04       20 阅读

热门阅读

  1. Docker学习

    2024-06-17 20:40:04       6 阅读
  2. 【力扣】目标和

    2024-06-17 20:40:04       7 阅读
  3. 从0到1实现YOLOv3

    2024-06-17 20:40:04       7 阅读
  4. 2024年反电诈重点:打击帮信罪&掩隐罪

    2024-06-17 20:40:04       7 阅读
  5. 第九章 Three.js 高级材质与着色器 (二)

    2024-06-17 20:40:04       5 阅读
  6. Jackson指定json的key

    2024-06-17 20:40:04       7 阅读
  7. 面向对象编程中的类详解

    2024-06-17 20:40:04       7 阅读
  8. 【镜像制作】docker命令的参数解释及用法

    2024-06-17 20:40:04       8 阅读
  9. NSNumber转float或double类型避免小数点后补0

    2024-06-17 20:40:04       8 阅读
  10. 使用 Selenium 保持登录会话信息

    2024-06-17 20:40:04       8 阅读
  11. MySQL触发器基本结构

    2024-06-17 20:40:04       8 阅读
  12. jingxiang制作

    2024-06-17 20:40:04       7 阅读