亚洲精品久久久中文字幕-亚洲精品久久片久久-亚洲精品久久青草-亚洲精品久久婷婷爱久久婷婷-亚洲精品久久午夜香蕉

您的位置:首頁技術(shù)文章
文章詳情頁

VUE中setTimeout和setInterval自動銷毀案例

瀏覽:72日期:2022-11-27 17:45:22

在Vue的大型單頁應(yīng)用中,在某個路由下,經(jīng)常會出現(xiàn)需要延遲執(zhí)行(setTimeout)或者間隔之心(setInterval)的函數(shù),但是每次在頁面destroy之前,都必須手動清理掉。

正常代碼如下:

beforeDestroy() { this._timer && clearTimeout(this._timer);}

但是如果一不小心,就會忘記,會造成意想不到的情況,那么有什么辦法能避免這種情況嗎?

當(dāng)然有,那就是重新寫一個setTimeout的方法(或者干脆劫持window.setTimeout)。

var _pageTimer = []; Vue.prototype.setTimeout = (fn, time) => { let handler = window.setTimeout(fn, time); _pageTimer.push(handler); return handler;}

在路由層面,當(dāng)每次頁面變更時,執(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ù)器資源的不必要的壓力。

補(bǔ)充知識:在vue中使用 setTimeout ,退出頁面后,計時器沒有銷毀

問題:頁面在使用 setTimeout 定時循環(huán)某方法,或者在兩個頁面之間跳轉(zhuǎn)時間小于定時器的時間間隔時,定時器還在運(yùn)行。

原因:當(dāng)我們刷新頁面時,會將當(dāng)前頁面之前創(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)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 国产乱子精品免费视观看片 | 免费看黄在线网站 | 在线观看亚洲精品专区 | 黄色录像在线免费观看 | 国产精品亚洲片夜色在线 | 亚洲成人日韩 | 日本一级aaaa特黄毛片 | 日本乱人伦片中文三区 | 亚洲伦理精品久久 | 青草青青产国视频在线 | 久久88香港三级台湾三级中文 | 国产最新精品2020好看的 | 欧美精品一级毛片 | 国产v精品成人免费视频71sao | 美女久草 | 伊人久久在线观看 | 小明看看永久免费视频 | a黄色一级片 | 看真人一级毛多毛片 | 亚洲九九香蕉 | 日本一级特黄高清ab片 | 高清国产精品入口麻豆 | 薰衣草视频高清在线观看免费 | 亚洲高清日韩精品第一区 | 日本在线观看免费看片 | 国产三级一区二区三区 | 成年人免费网站视频 | 一级特级毛片 | 国内外精品免费视频 | 国产精品人人视频 | 这里只有精品视频 | 日本欧美一区二区三区不卡视频 | a级国产片免费观看 | 美国毛片免费看 | 久久久久国产一级毛片高清板 | 日韩 欧美 中文 亚洲 高清 在线 | 国产一级α片 | 日韩一区二区三区不卡视频 | 免费播放观看视频大片 | 的九一视频入口在线观看 | 亚洲欧美精品 |