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