Vue中 使用定時器 （setInterval、setTimeout）

這是我參與8月更文挑戰的第9天，活動詳情查看：8月更文挑戰

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

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

1. 循環執行（ setInterval ）

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

語法：

setInterval(code, milliseconds)；
setInterval(function, milliseconds, param1, param2, ...)； code/function 必需。要調用一個代碼串，也能夠是一個函數。 milliseconds 必須。週期性執行或調用 code/function 之間的時間間隔，以毫秒計。 param1, param2, ... 可選。 傳給執行函數的其餘參數（IE9 及其更早版本不支持該參數）。 返回值: 返回一個 ID（數字），能夠將這個ID傳遞給 clearInterval() 來取消執行。 複製代碼

eg:

開始的時候建立了一個定時器 setInterval ，時間間隔爲2秒，每2秒都會調用一次函數 valChange，從而使 value 的值+1。

<template>
  <div> <h1>{{value}}</h1> <el-button type="primary" @click="start">開始</el-button> <el-button type="danger" @click="over">結束</el-button> </div>
</template>

<script> export default { data() { return { timer: "", value: 0, }; }, methods: { start(){ this.timer = setInterval(this.valChange, 2000); // 注意: 第一個參數爲方法名的時候不要加括號; }, valChange() { this.value++; console.log(this.value); }, over(){ clearInterval(this.timer); } }, mounted() {}, beforeDestroy() { clearInterval(this.timer); }, }; </script>
複製代碼

效果：

2. 定時執行 （ setTimeout）

定時執行 setTimeout 是設置一個時間，等待時間到達的時候只執行一次，可是執行完之後定時器還在，只是再也不運行；

語法：

setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...) code/function 必需。要調用一個代碼串，也能夠是一個函數。 milliseconds 可選。執行或調用 code/function 須要等待的時間，以毫秒計。默認爲 0。 param1, param2, ... 可選。 傳給執行函數的其餘參數（IE9 及其更早版本不支持該參數）。 返回值: 返回一個 ID（數字），能夠將這個ID傳遞給 clearTimeout() 來取消執行。 複製代碼

eg:

開始時候建立一個定時器 setTimeout，只在2秒後執行一次方法。

<template>
  <div> <h1>{{value}}</h1> <el-button type="primary" @click="start">開始</el-button> </div>
</template>

<script> export default { data() { return { timer: "", value: 0, }; }, methods: { start(){ this.timer = setTimeout(this.valChange, 2000); // 注意: 第一個參數爲方法名的時候不要加括號; }, valChange() { this.value++; console.log(this.value); } }, mounted() {}, beforeDestroy() { clearTimeout(this.timer); }, }; </script>
複製代碼

效果：