VUE中setTimeout和setInterval自動銷毀案例
在Vue的大型單頁應用中，在某個路由下，經(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() 取消請求，避免對服務器資源的不必要的壓力。
補充知識：在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)文章
Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決
這篇文章主要介紹了Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本篇文章主要介紹了在 React、Vue項目中使用SVG的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
Vue是構(gòu)建Web界面的JavaScript庫，原稱為Vue.js，它可以通過簡潔的API來提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，本文詳細介紹了Vue的使用安裝和相關(guān)知識，有興趣的同學可以參考借鑒2023-03-03
windows下vue-cli及webpack搭建安裝環(huán)境
這篇文章主要介紹了windows下vue-cli及webpack搭建安裝環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
關(guān)于vue.js中this.$emit的理解使用
本文主要介紹了關(guān)于vue.js中this.$emit的理解使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
如何使用VUE+faceApi.js實現(xiàn)攝像頭拍攝人臉識別
Face-api.js是一個JavaScript API,是基于tensorflow.js核心API 的人臉檢測和人臉識別的瀏覽器實現(xiàn),這篇文章主要給大家介紹了關(guān)于如何使用VUE+faceApi.js實現(xiàn)攝像頭拍攝人臉識別的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue+element-ui集成隨機驗證碼+用戶名+密碼的form表單驗證功能
在登入頁面，我們往往需要通過輸入驗證碼才能進行登入，那我們下面就詳講一下在vue項目中如何配合element-ui實現(xiàn)這個功能,需要的朋友可以參考下2018-08-08
vue3?v-bind="$attrs"繼承組件全部屬性的解決方案
這篇文章主要介紹了vue3?v-bind=“$attrs“?繼承組件全部屬性的解決方案,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
vue鼠標移入添加class樣式,鼠標移出去除樣式(active)實現(xiàn)方法
今天小編就為大家分享一篇vue鼠標移入添加class樣式,鼠標移出去除樣式(active)實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了key在Vue列表渲染時究竟起到了什么作用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04