Vue定時器輪詢 及 銷毀定時器

專案中我們經常需要實現輪詢

每隔幾秒請求一次介面重新整理資料

一般都會使用setinterval，但要注意單純使用它可能導致頁面卡死

原因是setinterval不會清除定時器佇列，每重複執行1次都會導致定時器疊加，卡死。

但是settimeout是自帶清除定時器的

所以可以疊加使用

window.setinterval(() => , 1000)

clearinterval(this.timer)

data: function () 	}	

methods: , 1000)
},	pollingfunc () 
}).then(res => })}
}

vue元件裡定時器銷毀問題

我在a頁面寫乙個定時器，讓他每秒鐘列印乙個1，然後跳轉到b頁面，此時可以看到，定時器依然在執行。這樣是非常消耗效能的。const timer setinterval 1000 通過 once來監聽定時器，在beforedestroy鉤子可以被清除。this once hook beforedestr...

vue元件裡定時器銷毀問題

我在a頁面寫乙個定時，讓他每秒鐘列印乙個1，然後跳轉到b頁面，此時可以看到，定時器依然在執行。這樣是非常消耗效能的。如下圖所示 解決方法1 首先我在data函式裡面進行定義定時器名稱 data 然後這樣使用定時器 this.timer 1000 最後在beforedestroy 生命週期內清除定時器...

vue元件裡定時器銷毀問題

解決方案1 data this.timer 1000 最後在beforedestroy 生命週期內清除定時器 beforedestroy 方案1有兩點不好的地方 解決方案2 該方法是通過 once這個事件偵聽器器在定義完定時器之後的位置來清除定時器。以下是完整 const timer setinte...