vue setInterval 定時器失效的解決方式
更新時間：2020年07月30日 09:14:15 作者：T-wave
這篇文章主要介紹了vue setInterval 定時器失效的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
正常情況下，在data里定義homeSetInterval 保存定時器的ID值 ，在銷毀組件是使用clearInterval方法是可行的
但在使用了如下的keep緩存模式在使用銷毀模式不行了
應(yīng)該使用離開路由器前方法beforeRouteLeave
補充知識：vue中使用定時器的坑
我們在使用vue的腳手架去搭建開發(fā)環(huán)境的時候，在A頁面寫入一個定時器去定時請求一個接口，但是我們?nèi)頁面，C頁面的時候都會有這個接口定時請求的現(xiàn)象，那么怎樣處理呢？
第一步：
首先我在data函數(shù)里面進行定義定時器名稱：
data() {
return {
timer: null // 定時器名稱
}
},
第二步：
在要用的方法中使用定時器
this.timer = (() => {
// 某些操作
}, 1000)
第三步：
beforeDestroy()生命周期內(nèi)清除定時器
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
以上這篇vue setInterval 定時器失效的解決方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解如何使用vue和electron開發(fā)一個桌面應(yīng)用
這篇文章主要為大家介紹了詳解如何使用vue和electron開發(fā)一個桌面應(yīng)用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
Vue中textarea自適應(yīng)高度方案的實現(xiàn)
本文主要介紹了Vue中textarea自適應(yīng)高度方案的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
vue elementui簡易側(cè)拉欄的使用小結(jié)
這篇文章主要介紹了vue elementui簡易側(cè)拉欄的使用,增加了側(cè)拉欄,目的是可以選擇多條數(shù)據(jù)展示數(shù)據(jù),本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
vuex新手進階篇之改變state?mutations的使用
在vue的項目中不可避免的會使用到vuex用于數(shù)據(jù)的存儲,下面這篇文章主要給大家介紹了關(guān)于vuex新手進階篇之改變state?mutations的使用,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
下面小編就為大家分享一篇Vue.js自定義事件的表單輸入組件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了vue開發(fā)公共組件之返回頂部，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
本篇文章主要介紹了Vue單文件組件的如何使用方式介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了使用webpack搭建vue項目的方法，本文以開發(fā)環(huán)境為例，通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要為大家介紹了Vue3組件間傳值避坑方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
用vue的雙向綁定簡單實現(xiàn)一個todo-list的示例代碼
本篇文章主要介紹了用vue的雙向綁定簡單實現(xiàn)一個todo的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08