亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue項目使用定時器每隔幾秒運行一次某方法代碼實例

 更新時間:2023年04月28日 11:42:42   作者:膽大王-  
有時候在項目中我們經(jīng)常需要設(shè)置簡單的倒計時功能,這個可以通過定時器來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue項目使用定時器每隔幾秒運行一次某方法的相關(guān)資料,需要的朋友可以參考下

代碼如下:

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組件入門知識全梳理

    vue組件入門知識全梳理

    這篇文章主要給大家介紹了關(guān)于vue組件入門知識的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • vue.js的手腳架vue-cli項目搭建的步驟

    vue.js的手腳架vue-cli項目搭建的步驟

    這篇文章主要介紹了vue.js的手腳架vue-cli項目搭建的步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • Vue組件創(chuàng)建和傳值的方法

    Vue組件創(chuàng)建和傳值的方法

    這篇文章給大家介紹了vue組件創(chuàng)建和傳值的方法,創(chuàng)建組件有三種方法,文中給大家介紹的非常詳細(xì),父組件傳值給子組件的方法,給大家介紹的也非常詳細(xì),需要的朋友參考下吧
    2018-08-08
  • 詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式

    詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式

    這篇文章主要介紹了詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • Vue中 key keep-alive的實現(xiàn)原理

    Vue中 key keep-alive的實現(xiàn)原理

    這篇文章主要介紹了Vue中 key keep-alive的實現(xiàn)原理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 使用vue-cli編寫vue插件的方法

    使用vue-cli編寫vue插件的方法

    本篇文章主要介紹了使用vue-cli編寫vue插件的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • 全面介紹vue 全家桶和項目實例

    全面介紹vue 全家桶和項目實例

    這篇文章主要介紹了全面介紹vue 全家桶和項目實例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • vue中如何引入jQuery和Bootstrap

    vue中如何引入jQuery和Bootstrap

    本篇文章主要介紹了vue中如何引入jQuery和Bootstrap,詳細(xì)的介紹了引入jQuery和Bootstrap的方法,有興趣的可以了解一下。
    2017-04-04
  • vue實現(xiàn)彈出框內(nèi)嵌頁面展示并添加tab切換展示實時加載

    vue實現(xiàn)彈出框內(nèi)嵌頁面展示并添加tab切換展示實時加載

    彈窗效果是在Web開發(fā)中經(jīng)常用到的一種交互效果,這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)彈出框內(nèi)嵌頁面展示并添加tab切換展示實時加載的相關(guān)資料,需要的朋友可以參考下
    2024-01-01
  • vue使用keep-alive保持滾動條位置的實現(xiàn)方法

    vue使用keep-alive保持滾動條位置的實現(xiàn)方法

    這篇文章主要介紹了vue使用keep-alive保持滾動條位置的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04

最新評論