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

时间:2021-11-18 23:23:29

--------------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>