欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VUE中setTimeout和setInterval自動(dòng)銷毀案例

 更新時(shí)間：2020年09月07日 15:03:13   作者：weixin_33852020  
這篇文章主要介紹了VUE中setTimeout和setInterval自動(dòng)銷毀案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

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

正常代碼如下：

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

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

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

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

在路由層面，當(dāng)每次頁面變更時(shí)，執(zhí)行清理工作：

router.beforeEach((to, from, next) => { _pageTimer.map(handler => { window.clearTimeout(handler); }) })

再頁面使用時(shí)，調(diào)用Vue的setTimeout，這樣是不是方便多了呢？ setInterval也是一樣的。

該方法還適用于對(duì)于頁面異步請(qǐng)求的ajax處理，可以通過獲取ajax的handler，在切面切換時(shí)，調(diào)用handler.abort() 取消請(qǐng)求，避免對(duì)服務(wù)器資源的不必要的壓力。

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

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

原因:當(dāng)我們刷新頁面時(shí)，會(huì)將當(dāng)前頁面之前創(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)銷毀案例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論