Vue中使用定時(shí)器setInterval和setTimeout

2021-8-24    前端達(dá)人

js中定時(shí)器有兩種，一個(gè)是循環(huán)執(zhí)行setInterval，另一個(gè)是定時(shí)執(zhí)行setTimeout

 

一、循環(huán)執(zhí)行（setInterval）

 

顧名思義，循環(huán)執(zhí)行就是設(shè)置一個(gè)時(shí)間間隔，每過(guò)一段時(shí)間都會(huì)執(zhí)行一次這個(gè)方法,直到這個(gè)定時(shí)器被銷(xiāo)毀掉

用法是setInterval（“方法名或方法”，“延時(shí)”）， 第一個(gè)參數(shù)為方法名或者方法，注意為方法名的時(shí)候不要加括號(hào),第二個(gè)參數(shù)為時(shí)間間隔

復(fù)制代碼 
<template> <section> <h1>hello world~</h1> </section> </template> <script> export default {
    data() { return {
        timer: '',
        value: 0 };
    },
    methods: {
      get() { this.value ++;
        console.log(this.value);
      }
    },
    mounted() { this.timer = setInterval(this.get, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  }; </script>
復(fù)制代碼

 

 

上面的例子就是頁(yè)面初始化的時(shí)候創(chuàng)建了一個(gè)定時(shí)器setInterval，時(shí)間間隔為1秒，每一秒都會(huì)調(diào)用一次函數(shù)get，從而使value的值加一。

 

 

 

 

二、定時(shí)執(zhí)行 （setTimeout）

 

定時(shí)執(zhí)行setTimeout是設(shè)置一個(gè)時(shí)間，等待時(shí)間到達(dá)的時(shí)候只執(zhí)行一次，但是執(zhí)行完以后定時(shí)器還在，只是沒(méi)有運(yùn)行

用法是setTimeout(“方法名或方法”, “延時(shí)”); 第一個(gè)參數(shù)為方法名或者方法，注意為方法名的時(shí)候不要加括號(hào),第二個(gè)參數(shù)為時(shí)間間隔

復(fù)制代碼 
<template> <section> <h1>hello world~</h1> </section> </template> <script> export default {
    data() { return {
        timer: '',
        value: 0 };
    },
    methods: {
      get() { this.value ++;
        console.log(this.value);
      }
    },
    mounted() { this.timer = setTimeout(this.get, 1000);
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  }; </script>
復(fù)制代碼

 

 

上面是頁(yè)面初始化時(shí)候創(chuàng)建一個(gè)定時(shí)器setTimeout，只在1秒后執(zhí)行一次方法。

 

 

 

定時(shí)器需要在頁(yè)面銷(xiāo)毀的時(shí)候清除掉，不然會(huì)一直存在?。?！

 



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：博客園

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔