Vue中使用定時器setInterval和setTimeout

js中定時器有兩種，一個是循環執行setInterval，另一個是定時執行setTimeout

 

一、循環執行（setInterval）

 

顧名思義，循環執行就是設置一個時間間隔，每過一段時間都會執行一次這個方法,直到這個定時器被銷毀掉

用法是setInterval（“方法名或方法”，“延時”）， 第一個參數為方法名或者方法，注意為方法名的時候不要加括號,第二個參數為時間間隔

<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>

 

 

上面的例子就是頁面初始化的時候創建了一個定時器setInterval，時間間隔為1秒，每一秒都會調用一次函數get，從而使value的值加一。

 

 

 

 

二、定時執行 （setTimeout）

 

定時執行setTimeout是設置一個時間，等待時間到達的時候只執行一次，但是執行完以后定時器還在，只是沒有運行

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

<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>

 

 

上面是頁面初始化時候創建一個定時器setTimeout，只在1秒后執行一次方法。

 

 

 

定時器需要在頁面銷毀的時候清除掉，不然會一直存在！！！

 

 

嗯,就醬~~