清除定时器和 vue 中遇到的定时器setTimeout & setInterval问题

Z时代
2024-01-10
分类：综合

vue

2019-03更新

找到了更简单的方法，以setinterval为例，各位自行参考

mounted() {
    const that = this
    const timer = setInterval(function () {
      //这里是想轮循的部分
      }
    }, 4000) // 4000ms = 4s
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once(\'hook:beforeDestroy\', () => {
      clearInterval(timer) // 此处的timer即 上文const的 timer
    })
  }

建议使用这个方法。后文可忽略

--------------VUE项目中遇到一个问题。a.vue 文件中触发setTimeout后，使用按钮跳转至其他页面，快速返回至a.vue页面后发现定时器仍然在走。

例子：a.vue代码

window.setTimeout(function(){
　window.location.href = "/serverMonitor?t="+ new Date().getTime();
}，5000）

解决办法：

window.setTimeout(function(){
    if(this && !this._isDestroyed){ //_isDestroyed 组件是否被销毁
        return; 
    }
    window.location.href = "/serverMonitor?t="+ new Date().getTime();
}，5000）

--------------清除定时器

定时器一般有两个

1、setTimeout();//n毫秒后执行一次

2、setInterval();//每隔n毫秒执行一次

setTimeout()对应的是 clearTimeout(funName);

setInterval()对应的是 clearInterval(funName);

<script>
   var funName1 = setTimeout(function(){
       return ;
   },1000);
    var funName2  = setInterval(function(){
        return fun2;
    },1000)
    //清除Timeout的定时器,传入id(创建定时器时会返回一个id)
    clearTimeout(funName1 );
    //清除Interval的定时器,传入id(创建定时器时会返回一个id)
    clearInterval(funName2  );
//也可以使用return值 来清除
setTimeout(function(){
  console.log("33");
  return 33;
},3000);
 clearTimeout(33);
1
</script>