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

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

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

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

一、循環(huán)執(zhí)行（setInterval）

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

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

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

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

二、定時執(zhí)行 （setTimeout）

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

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

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

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

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