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>

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

上面的例子就是页面初始化的时候创建了一个定时器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>

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

上面是页面初始化时候创建一个定时器setTimeout，只在1秒后执行一次方法。

以上是“vue.js中使用定时器的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！

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

相关推荐