兩種方案清除定時(shí)器，開(kāi)發(fā)者經(jīng)常使用方案1，建議使用方案2

方案1

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

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

然后這樣使用定時(shí)器：

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

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

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

方案1有兩點(diǎn)不好的地方，引用尤大的話來(lái)說(shuō)就是：

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

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

方案2

該方法是通過(guò)$once這個(gè)事件偵聽(tīng)器器在定義完定時(shí)器之后的位置來(lái)清除定時(shí)器。

以下是完整代碼：

const timer = setInterval(() =>{ // 某些定時(shí)器操作}, 500); // 通過(guò)$once來(lái)監(jiān)聽(tīng)定時(shí)器，在beforeDestroy鉤子可以被清除。this.$once(’hook:beforeDestroy’, () => {clearInterval(timer); })

其他程序化的事件偵聽(tīng)器

通過(guò) $on(eventName, eventHandler) 偵聽(tīng)一個(gè)事件

通過(guò) $once(eventName, eventHandler) 一次性偵聽(tīng)一個(gè)事件

通過(guò) $off(eventName, eventHandler) 停止偵聽(tīng)一個(gè)事件

附官網(wǎng)詳細(xì)地址：程序化事件偵聽(tīng)器

補(bǔ)充知識(shí)：vue在mounted中創(chuàng)建定時(shí)器與清除定時(shí)器

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

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) //當(dāng)num等于100時(shí)清除定時(shí)器 } }, 1000); }

以上這篇Vue清除定時(shí)器setInterval優(yōu)化方案分享就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。