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