vue 如何清除定時器

2022-03-12 19:59:36 字數 880 閱讀 3444

// ********************==更新於2020.09.21*************************===start

以下清除定時器的舊方法:

1、在data函式裡面進行定義定時器名稱

2、在beforedestroy()生命週期內清除定時器

這種做法的缺點是:

(1)vue例項中需要有這個定時器的例項,感覺有點多餘;

(2)建立的定時器**和銷毀定時器的**沒有放在一起,通常很容易忘記去清理這個定時器,不容易維護;

新的清除定時器方法是通過$once這個事件偵聽器器在定義完定時器之後的位置來清除定時器。優點是使得**可讀性更強,一目了然。以下是完整**:

export default,1000);

this.$once('hook:beforedestroy',()=>)}

}}

// ********************==更新於2020.09.21*************************===end

在頁面中需要定時重新整理區域性資料,在資料變化是否頻繁的情況下,沒有必要使用websocket,因為資料變化頻繁,資料實時變化太快看不清楚。因此頁面會定時呼叫後台介面以達到實時重新整理資料的效果。

1、在data中定義乙個定時器變數,timer

2、在mounted中把定時器的複製為timer

3、頁面離開前,在beforedestroy 中清除定時器timer

data() 

},created() ,

mounted() ,

beforedestroy(),

methods:

}

Vue清除定時器setInterval優化方案

請您移步我的新個人部落格 謝謝!首先我在data函式裡面進行定義定時器名稱 data 然後這樣使用定時器 this.timer 1000 最後在beforedestroy 生命週期內清除定時器 beforedestroy 方案1有兩點不好的地方,引用尤大的話來說就是 該方法是通過 once這個事件偵...

Vue清除所有JS定時器

vue清除所有js定時器 在webpack vue 的專案中如何在頁面跳轉的時候清除所有的定時器 js定時器會有乙個返回值 數字 通過這個返回值我們可以找到這個定時器 在vue專案中可以使用路由守衛的 beforeeach方法,來進行清除功能 首先,宣告乙個全域性變數陣列,把所有的定時器的返回值放到...

在vue元件中設定定時器和清除定時器

由於專案中難免會碰到需要實時重新整理,無論是獲取簡訊碼,還是在支付完成後輪詢獲取當前最新支付狀態,這時就需要用到定時器。但是,定時器如果不及時合理地清除,會造成業務邏輯混亂甚至應用卡死的情況,這個時就需要清除定時器。某個頁面中啟動定時器後,一定要在頁面關閉時將定時器清除掉。即在頁面解除安裝 關閉 的...