Vue中使用定時器setInterval和setTimeout

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

 

1、循環執行（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的值加一。

 

 

 

 

2、定時執行 （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秒後執行一次方法。

 

 

 

定時器須要在頁面銷燬的時候清除掉，否則會一直存在！！！

 

 

嗯,就醬~~