Vue 中定时器setInterval和setTimeout

最新推荐文章于 2024-07-18 08:31:26 发布

马卫斌前端工程师

最新推荐文章于 2024-07-18 08:31:26 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_35350009/article/details/126512684

版权

Vue 专栏收录该内容

47 篇文章 4 订阅

订阅专栏

本文介绍了JavaScript中的循环执行定时器setInterval和单次执行定时器setTimeout的使用方法及其区别。通过示例代码展示了如何在Vue组件中使用setInterval实现每隔一秒执行一次方法，以及setTimeout如何在指定延迟后仅执行一次方法。在组件销毁前，记得要清除定时器以避免内存泄漏。

摘要由CSDN通过智能技术生成

循环执行 setInterval

顾名思义，循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉

用法是setInterval（“方法名或方法”，“延时”），第一个参数为方法名或者方法，注意为方法名的时候不要加括号,第二个参数为时间间隔

<template>
  <section>
    <h1>hello world~</h1>
  </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>
    <h1>hello world~</h1>
  </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>