Vue中使用定時器的方式有哪些

本篇內容主要講解“Vue中使用定時器的方式有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue中使用定時器的方式有哪些”吧!

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>
    <h2>{{value}}</h2>
    <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秒后執行一次方法。

let timer = setTimeout(() => {
  //需要定時執行的代碼
  console.debug("Hello World");
  }, 2000)

到此，相信大家對“Vue中使用定時器的方式有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！