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)不好的地方，引用尤大的話來說就是：
它需要在這個(gè)組件實(shí)例中保存這個(gè) timer，如果可以的話最好只有生命周期鉤子可以訪問到它。這并不算嚴(yán)重的問題，但是它可以被視為雜物。
我們的建立代碼獨(dú)立于我們的清理代碼，這使得我們比較難于程序化的清理我們建立的所有東西。
方案2
該方法是通過$once這個(gè)事件偵聽器器在定義完定時(shí)器之后的位置來清除定時(shí)器。
以下是完整代碼：
const timer = setInterval(() =>{
// 某些定時(shí)器操作
}, 500);
// 通過$once來監(jiān)聽定時(shí)器，在beforeDestroy鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
其他程序化的事件偵聽器
通過 $on(eventName, eventHandler) 偵聽一個(gè)事件
通過 $once(eventName, eventHandler) 一次性偵聽一個(gè)事件
通過 $off(eventName, eventHandler) 停止偵聽一個(gè)事件
附官網(wǎng)詳細(xì)地址：程序化事件偵聽器
補(bǔ)充知識(shí)：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)化方案分享就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue是可以自定義指令的,最近學(xué)習(xí)過程中遇見了一個(gè)需要懶加載的功能，發(fā)現(xiàn)網(wǎng)上這方面的資料較少，所以下面這篇文章主要給大家介紹了關(guān)于Vue.js如何實(shí)現(xiàn)路由懶加載的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)記事本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue組件之間數(shù)據(jù)傳遞的方法實(shí)例分析
這篇文章主要介紹了vue組件之間數(shù)據(jù)傳遞的方法,結(jié)合實(shí)例形式分析了vue.js父組件與子組件之間數(shù)據(jù)傳遞相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
vue+echarts5實(shí)現(xiàn)中國(guó)地圖的示例代碼
本文主要介紹了vue+echarts5實(shí)現(xiàn)中國(guó)地圖的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
最近在寫vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過渡的效果,雖然vue動(dòng)畫不是強(qiáng)項(xiàng),庫(kù)也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過渡動(dòng)畫效果的相關(guān)資料,需要的朋友可以參考下2023-01-01
解決vite build打包后頁(yè)面不能正常訪問的情況
這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開,顯示空白問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇關(guān)于Vuex中的State使用介紹，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決
這篇文章主要介紹了vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要給大家介紹了關(guān)于Vue引用echarts超詳細(xì)步驟,vue中優(yōu)雅的使用echarts?在前端工作中,數(shù)據(jù)可視化用得最多的,可能就是圖表了,需要的朋友可以參考下2023-08-08
vue提供了mixins、extends配置項(xiàng)，最近使用中發(fā)現(xiàn)很好用。下面小編通過本文給大家介紹下vue中 mixins和extends的巧妙用法，需要的朋友參考下吧2017-12-12