VUE中setTimeout和setInterval自動(dòng)銷毀案例
在Vue的大型單頁(yè)應(yīng)用中，在某個(gè)路由下，經(jīng)常會(huì)出現(xiàn)需要延遲執(zhí)行（setTimeout)或者間隔之心（setInterval）的函數(shù)，但是每次在頁(yè)面destroy之前，都必須手動(dòng)清理掉。
正常代碼如下：
beforeDestroy() {
this._timer && clearTimeout(this._timer);
}
但是如果一不小心，就會(huì)忘記，會(huì)造成意想不到的情況，那么有什么辦法能避免這種情況嗎？
當(dāng)然有，那就是重新寫(xiě)一個(gè)setTimeout的方法（或者干脆劫持window.setTimeout)。
var _pageTimer = [];
Vue.prototype.setTimeout = (fn, time) => {
let handler = window.setTimeout(fn, time);
_pageTimer.push(handler);
return handler;
}
在路由層面，當(dāng)每次頁(yè)面變更時(shí)，執(zhí)行清理工作：
router.beforeEach((to, from, next) => { _pageTimer.map(handler => { window.clearTimeout(handler); }) })
再頁(yè)面使用時(shí)，調(diào)用Vue的setTimeout，這樣是不是方便多了呢？ setInterval也是一樣的。
該方法還適用于對(duì)于頁(yè)面異步請(qǐng)求的ajax處理，可以通過(guò)獲取ajax的handler，在切面切換時(shí)，調(diào)用handler.abort() 取消請(qǐng)求，避免對(duì)服務(wù)器資源的不必要的壓力。
補(bǔ)充知識(shí)：在vue中使用 setTimeout ,退出頁(yè)面后,計(jì)時(shí)器沒(méi)有銷毀
問(wèn)題：頁(yè)面在使用 setTimeout 定時(shí)循環(huán)某方法，或者在兩個(gè)頁(yè)面之間跳轉(zhuǎn)時(shí)間小于定時(shí)器的時(shí)間間隔時(shí)，定時(shí)器還在運(yùn)行。
原因:當(dāng)我們刷新頁(yè)面時(shí)，會(huì)將當(dāng)前頁(yè)面之前創(chuàng)建的 setTimeout 以及其他定時(shí)器都清除掉,但是僅僅是路由切換是不會(huì)清除的。
data (){
return{
clearTime: ''
}
},
mounted () {
randomGet () {
// 在 1分鐘到 2分鐘之間 不定時(shí)執(zhí)行
var r = Math.random() * (2 - 1) + 1
var t = Math.ceil(r * 60000)
// console.log(t)
this.clearTime = setTimeout(() => {
this.submit()
this.randomGet()
}, t)
},
submit () {
console.log('aaaa')
}
},
destroyed () {
clearTimeout(this.clearTime) // 清除
}
以上這篇VUE中setTimeout和setInterval自動(dòng)銷毀案例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+vantUI3時(shí)間組件封裝過(guò)程支持選擇年以及年月日時(shí)分秒
這篇文章主要介紹了Vue3+vantUI3時(shí)間組件封裝過(guò)程支持選擇年以及年月日時(shí)分秒,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vue 虛擬DOM的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了VUE3中的函數(shù)的聲明和使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
el-table 選擇框根據(jù)條件設(shè)置某項(xiàng)不可選中的操作代碼
這篇文章主要介紹了el-table 選擇框根據(jù)條件設(shè)置某項(xiàng)不可選中的操作代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
vue使用canvas畫(huà)布實(shí)現(xiàn)平面圖點(diǎn)位標(biāo)注功能(最新推薦)
這篇文章主要介紹了vue使用canvas畫(huà)布實(shí)現(xiàn)平面圖點(diǎn)位標(biāo)注功能,經(jīng)過(guò)本文一番研究發(fā)現(xiàn)canvas標(biāo)簽可以完成很多功能，電子簽名，點(diǎn)位標(biāo)注，問(wèn)題標(biāo)注，畫(huà)圖功能，感興趣的朋友跟隨小編一起看看吧2023-07-07
這篇文章主要介紹了Vue 自定義指令功能,結(jié)合完整實(shí)例形式分析了vue.js自定義指令相關(guān)實(shí)現(xiàn)與使用操作技巧,需要的朋友可以參考下2019-09-09
Vue中使用matomo進(jìn)行訪問(wèn)流量統(tǒng)計(jì)的實(shí)現(xiàn)
這篇文章主要介紹了Vue中使用matomo進(jìn)行訪問(wèn)流量統(tǒng)計(jì)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表
這篇文章主要介紹了在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue路由組件的緩存keep-alive和include屬性的具體使用
：瀏覽器頁(yè)面在進(jìn)行切換時(shí),原有的路由組件會(huì)被銷毀,通過(guò)緩存可以保存被切換的路由組件,本文主要介紹了Vue路由組件的緩存keep-alive和include屬性的具體使用,感興趣的可以了解一下2023-11-11
使用vuex的state狀態(tài)對(duì)象的5種方式
本文給大家介紹了使用vuex的state狀態(tài)對(duì)象的5種方式，給大家貼出了我的vuex的結(jié)構(gòu)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04