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

vue離開(kāi)頁(yè)面時(shí)如何銷毀定時(shí)器

 更新時(shí)間：2022年05月30日 09:45:55   作者：夏代有工的玉  
這篇文章主要介紹了vue離開(kāi)頁(yè)面時(shí)如何銷毀定時(shí)器，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue離開(kāi)頁(yè)面銷毀定時(shí)器

beforeDestroy() {
if(this.timer) {
　　　　clearInterval(this.timer); //關(guān)閉
　　?} ?//利用vue的生命周期函數(shù)

vue 是單頁(yè)面應(yīng)用，路由切換后，定時(shí)器并不會(huì)自動(dòng)關(guān)閉，需要手動(dòng)清除，當(dāng)頁(yè)面被銷毀時(shí)，清除定時(shí)器即可。

組件里定時(shí)器銷毀問(wèn)題

我在a頁(yè)面寫(xiě)一個(gè)定時(shí)，讓他每秒鐘打印一個(gè)1，然后跳轉(zhuǎn)到b頁(yè)面，此時(shí)可以看到，定時(shí)器依然在執(zhí)行。這樣是非常消耗性能的。

如下圖所示：

解決方法1

首先我在data函數(shù)里面進(jìn)行定義定時(shí)器名稱：

 data() {                   
   return {                                          
    timer: null  // 定時(shí)器名稱                 
   }         
 },

然后這樣使用定時(shí)器：

this.timer = (() => {     // 某些操作 }, 1000)

最后在beforeDestroy()生命周期內(nèi)清除定時(shí)器：

beforeDestroy() {         
  clearInterval(this.timer);                 
  this.timer = null;
}

方案1有兩點(diǎn)不好的地方，引用尤大的話來(lái)說(shuō)就是：

  • 它需要在這個(gè)組件實(shí)例中保存這個(gè) timer，如果可以的話最好只有生命周期鉤子可以訪問(wèn)到它。這并不算嚴(yán)重的問(wèn)題，但是它可以被視為雜物。
  • 我們的建立代碼獨(dú)立于我們的清理代碼，這使得我們比較難于程序化的清理我們建立的所有東西。

解決方案2

該方法是通過(guò)$once這個(gè)事件偵聽(tīng)器器在定義完定時(shí)器之后的位置來(lái)清除定時(shí)器。

以下是完整代碼：

const timer = setInterval(() =>{ // 某些定時(shí)器操作   }, 500);            
// 通過(guò)$once來(lái)監(jiān)聽(tīng)定時(shí)器，在beforeDestroy鉤子可以被清除。 
this.$once('hook:beforeDestroy', () => {                     
        clearInterval(timer);                                     
})

類似于其他需要在當(dāng)前頁(yè)面使用，離開(kāi)需要銷毀的組件（例如一些第三方庫(kù)的picker組件等等），都可以使用此方式來(lái)解決離開(kāi)后以后在背后運(yùn)行的問(wèn)題。

綜合來(lái)說(shuō)，我們更推薦使用方案2，使得代碼可讀性更強(qiáng)，一目了然。如果不清楚$once、$on、$off的使用，這里送上官網(wǎng)的地址教程，在程序化的事件偵聽(tīng)器那里。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

相關(guān)文章

最新評(píng)論