清除定時器 和 vue 中遇到的定時器setTimeout & setInterval問題

 

---

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>