vue.js中使用定時器的方法

這篇文章主要介紹vue.js中使用定時器的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

vue.js中使用定時器的方法：1、使用循環執行setInterval，每過一段時間都會執行一次這個方法，直到這個定時器被銷毀掉；2、定時執行setTimeout，定時執行setTimeout是設置一個時間，等待時間到達的時候只執行一次。

vue.js中使用定時器的方法：

一、循環執行（setInterval）

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

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

<template>
  <section>
    <h2>hello world~</h2>
  </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>
    <h2>hello world~</h2>
  </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秒后執行一次方法。

以上是“vue.js中使用定時器的方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！