Vue清除定時器setInterval優化方案分享

兩種方案清除定時器，開發者經常使用方案1，建議使用方案2

方案1

首先我在data函數里面進行定義定時器名稱：

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

然后這樣使用定時器：

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

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

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

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

它需要在這個組件實例中保存這個 timer，如果可以的話最好只有生命周期鉤子可以訪問到它。這并不算嚴重的問題，但是它可以被視為雜物。

我們的建立代碼獨立于我們的清理代碼，這使得我們比較難于程序化的清理我們建立的所有東西。

方案2

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

以下是完整代碼：

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

其他程序化的事件偵聽器

通過 $on(eventName, eventHandler) 偵聽一個事件

通過 $once(eventName, eventHandler) 一次性偵聽一個事件

通過 $off(eventName, eventHandler) 停止偵聽一個事件

附官網詳細地址：程序化事件偵聽器

補充知識：vue在mounted中創建定時器與清除定時器

我就廢話不多說了，大家還是直接看代碼吧~

mounted(){ var that=this; var num = 1; var ss=’’; var a=setInterval(()=>{ a+=10; if(this num===100){ ss=’success’; console.log(ss) clearInterval(a) //當num等于100時清除定時器 } }, 1000); }

以上這篇Vue清除定時器setInterval優化方案分享就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。