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