vue項目使用定時器每隔幾秒運行一次某方法代碼實例
代碼如下:
data() { return { timer:null, //定時器名稱 } }, created() { this.setTime(); }, beforeDestroy(){ clearInterval(this.timer); // 清除定時器 this.timer = null; }, methods: { setTime(){ //每隔一分鐘運行一次保存方法 this.timer = setInterval(()=>{ this.saveList(); },60000) }, saveList(){ } }
上面這樣寫已經(jīng)實現(xiàn)功能,關(guān)閉頁面不會繼續(xù)執(zhí)行。長時間運行頁面也沒有卡死。
有人說,setInterval()里面嵌套setTimeout()
setinterval不會清除定時器隊列,每重復(fù)執(zhí)行1次都會導(dǎo)致定時器疊加,最終卡死你的網(wǎng)頁。 其原因與JS引擎線程有關(guān)(需深入研究JS引擎線程) ,但是setTimeout是自帶清除定時器的。 我沒有出現(xiàn)頁面卡死的情況所以就沒加setTimeout。
setInterval(() => { setTimeout(() => { this.queryChartTime() }, 0) }, 10000)
setInterval()和setTimeout()的區(qū)別:
一個是循環(huán)執(zhí)行setInterval,另一個是定時執(zhí)行setTimeout
1:setInterval 循環(huán)執(zhí)行, 每隔一段時間執(zhí)行一次, 多次執(zhí)行。
2:setTimeout 到時間后執(zhí)行, 只執(zhí)行一次。
在beforeDestroy()生命周期內(nèi)清除定時器
定時器需要在頁面銷毀的時候清除掉,不然會一直存在!!
補充知識:定時執(zhí)行 ( setTimeout)
定時執(zhí)行 setTimeout 是設(shè)置一個時間,等待時間到達(dá)的時候只執(zhí)行一次,但是執(zhí)行完以后定時器還在,只是不再運行;
語法:
setTimeout(code, milliseconds, param1, param2, ...) setTimeout(function, milliseconds, param1, param2, ...) ? code/function?? ? ? ? ? ? 必需。要調(diào)用一個代碼串,也可以是一個函數(shù)。 milliseconds?? ? ? ? ? ? 可選。執(zhí)行或調(diào)用 code/function 需要等待的時間,以毫秒計。默認(rèn)為 0。 param1, param2, ...?? ? ? ? 可選。 傳給執(zhí)行函數(shù)的其他參數(shù)(IE9 及其更早版本不支持該參數(shù))。 ? 返回值:?? ?返回一個 ID(數(shù)字),可以將這個ID傳遞給 clearTimeout() 來取消執(zhí)行。 eg: 開始時候創(chuàng)建一個定時器 setTimeout,只在2秒后執(zhí)行一次方法。 let timer = setTimeout(() => { ? //需要定時執(zhí)行的代碼 ? console.debug("Hello World"); ? }, 2000)
總結(jié)
到此這篇關(guān)于vue項目使用定時器每隔幾秒運行一次某方法的文章就介紹到這了,更多相關(guān)vue定時器每隔幾秒運行一次內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式
這篇文章主要介紹了詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04Vue中 key keep-alive的實現(xiàn)原理
這篇文章主要介紹了Vue中 key keep-alive的實現(xiàn)原理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09vue實現(xiàn)彈出框內(nèi)嵌頁面展示并添加tab切換展示實時加載
彈窗效果是在Web開發(fā)中經(jīng)常用到的一種交互效果,這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)彈出框內(nèi)嵌頁面展示并添加tab切換展示實時加載的相關(guān)資料,需要的朋友可以參考下2024-01-01vue使用keep-alive保持滾動條位置的實現(xiàn)方法
這篇文章主要介紹了vue使用keep-alive保持滾動條位置的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04