vue離開頁面時如何銷毀定時器

更新時間：2022年05月30日 09:45:55 作者：夏代有工的玉

這篇文章主要介紹了vue離開頁面時如何銷毀定時器，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue離開頁面銷毀定時器

beforeDestroy() {
if(this.timer) {
　　　　clearInterval(this.timer); //關(guān)閉
　　?} ?//利用vue的生命周期函數(shù)

vue 是單頁面應(yīng)用，路由切換后，定時器并不會自動關(guān)閉，需要手動清除，當(dāng)頁面被銷毀時，清除定時器即可。

組件里定時器銷毀問題

我在a頁面寫一個定時，讓他每秒鐘打印一個1，然后跳轉(zhuǎn)到b頁面，此時可以看到，定時器依然在執(zhí)行。這樣是非常消耗性能的。

如下圖所示：

解決方法1

首先我在data函數(shù)里面進(jìn)行定義定時器名稱：

 data() {                   
   return {                                          
    timer: null  // 定時器名稱                 
   }         
 },

然后這樣使用定時器：

this.timer = (() => {     // 某些操作 }, 1000)

最后在beforeDestroy()生命周期內(nèi)清除定時器：

beforeDestroy() {         
  clearInterval(this.timer);                 
  this.timer = null;
}

方案1有兩點不好的地方，引用尤大的話來說就是：

它需要在這個組件實例中保存這個 timer，如果可以的話最好只有生命周期鉤子可以訪問到它。這并不算嚴(yán)重的問題，但是它可以被視為雜物。
我們的建立代碼獨立于我們的清理代碼，這使得我們比較難于程序化的清理我們建立的所有東西。

解決方案2

該方法是通過$once這個事件偵聽器器在定義完定時器之后的位置來清除定時器。

以下是完整代碼：

const timer = setInterval(() =>{ // 某些定時器操作   }, 500);            
// 通過$once來監(jiān)聽定時器，在beforeDestroy鉤子可以被清除。 
this.$once('hook:beforeDestroy', () => {                     
        clearInterval(timer);                                     
})

類似于其他需要在當(dāng)前頁面使用，離開需要銷毀的組件（例如一些第三方庫的picker組件等等），都可以使用此方式來解決離開后以后在背后運(yùn)行的問題。

綜合來說，我們更推薦使用方案2，使得代碼可讀性更強(qiáng)，一目了然。如果不清楚$once、$on、$off的使用，這里送上官網(wǎng)的地址教程，在程序化的事件偵聽器那里。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: