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