Vue清除定時(shí)器setInterval優(yōu)化方案分享
兩種方案清除定時(shí)器，開發(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)不好的地方，引用尤大的話來說就是：
它需要在這個組件實(shí)例中保存這個 timer，如果可以的話最好只有生命周期鉤子可以訪問到它。這并不算嚴(yán)重的問題，但是它可以被視為雜物。
我們的建立代碼獨(dú)立于我們的清理代碼，這使得我們比較難于程序化的清理我們建立的所有東西。
方案2
該方法是通過$once這個事件偵聽器器在定義完定時(shí)器之后的位置來清除定時(shí)器。
以下是完整代碼：
const timer = setInterval(() =>{
// 某些定時(shí)器操作
}, 500);
// 通過$once來監(jiān)聽定時(shí)器，在beforeDestroy鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
其他程序化的事件偵聽器
通過 $on(eventName, eventHandler) 偵聽一個事件
通過 $once(eventName, eventHandler) 一次性偵聽一個事件
通過 $off(eventName, eventHandler) 停止偵聽一個事件
附官網(wǎng)詳細(xì)地址：程序化事件偵聽器
補(bǔ)充知識：vue在mounted中創(chuàng)建定時(shí)器與清除定時(shí)器
我就廢話不多說了，大家還是直接看代碼吧~
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)化方案分享就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.config.js使用代理配置真實(shí)請求url方式
這篇文章主要介紹了vue.config.js使用代理配置真實(shí)請求url方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了前端vue架構(gòu)插槽slot使用教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-02-02
VUE+ElementUI下載文件的幾種方式(小結(jié))
本文主要介紹了VUE+ElementUI下載文件的幾種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue實(shí)現(xiàn)行列轉(zhuǎn)換的一種方法
這篇文章主要介紹了vue實(shí)現(xiàn)行列轉(zhuǎn)換的一種方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue數(shù)據(jù)變化但頁面刷新問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目netWork地址無法訪問的問題及解決
這篇文章主要介紹了vue項(xiàng)目netWork地址無法訪問的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
vue-cli3項(xiàng)目展示本地Markdown文件的方法
這篇文章主要介紹了vue-cli3項(xiàng)目展示本地Markdown文件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
完美解決vue 項(xiàng)目開發(fā)越久 node_modules包越大的問題
這篇文章主要介紹了vue 項(xiàng)目開發(fā)越久 node_modules包越大的問題及解決方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
在vue項(xiàng)目創(chuàng)建的后初始化首次使用stylus安裝方法分享
下面小編就為大家分享一篇在vue項(xiàng)目創(chuàng)建的后初始化首次使用stylus安裝方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
vue.js的靈魂是組件，而組件的靈魂是插槽。借助于插槽，我們能最大程度上實(shí)現(xiàn)組件復(fù)用。本文主要是對插槽的實(shí)現(xiàn)機(jī)制進(jìn)行詳細(xì)概括總結(jié)，在某些場景中，有一定的用處2021-06-06