vue setInterval 定時器失效的解決方式
更新時間：2020年07月30日 09:14:15 作者：T-wave
這篇文章主要介紹了vue setInterval 定時器失效的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
正常情況下，在data里定義homeSetInterval 保存定時器的ID值 ，在銷毀組件是使用clearInterval方法是可行的
但在使用了如下的keep緩存模式在使用銷毀模式不行了
應(yīng)該使用離開路由器前方法beforeRouteLeave
補(bǔ)充知識：vue中使用定時器的坑
我們在使用vue的腳手架去搭建開發(fā)環(huán)境的時候，在A頁面寫入一個定時器去定時請求一個接口，但是我們?nèi)頁面，C頁面的時候都會有這個接口定時請求的現(xiàn)象，那么怎樣處理呢？
第一步：
首先我在data函數(shù)里面進(jìn)行定義定時器名稱：
data() {
return {
timer: null // 定時器名稱
}
},
第二步：
在要用的方法中使用定時器
this.timer = (() => {
// 某些操作
}, 1000)
第三步：
beforeDestroy()生命周期內(nèi)清除定時器
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
以上這篇vue setInterval 定時器失效的解決方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在我們?nèi)粘ｉ_發(fā)中,有些組件里面加載非常慢,導(dǎo)致我們路由跳轉(zhuǎn)的時候回出現(xiàn)卡頓情況,這篇文章主要介紹了Vue3:?Suspense異步加載組件,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue?package-lock.json的作用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，今天通過本文給大家分享VSCode開發(fā)UNI-APP 配置教程及插件推薦與注意事項，感興趣的朋友一起看看吧2021-08-08
EasyPlayer.js是集播放http-flv,?hls,?websocket?于一身的H5視頻直播/視頻點播播放器,?使用簡單,?功能強(qiáng)大，下面大家就跟隨小編一起學(xué)習(xí)一下它的具體使用吧2023-08-08
這篇文章主要為大家介紹了Vue3+vueuse實現(xiàn)放大鏡示例過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue-router 組件的高級應(yīng)用,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了vue.js開發(fā)環(huán)境的安裝教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)頁面滾動到底部刷新，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要介紹了vue基礎(chǔ)之模板和過濾器用法,結(jié)合實例形式分析了vue模板與過濾器的功能、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-03-03
element表格數(shù)據(jù)部分模糊的實現(xiàn)代碼
這篇文章給大家介紹了element表格數(shù)據(jù)模糊的實現(xiàn)代碼,文中有詳細(xì)的效果展示和實現(xiàn)代碼供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-01-01