vue 使用定时器setInterval，且解决不起作用

最新推荐文章于 2025-04-01 10:11:12 发布

moon_watermelon

最新推荐文章于 2025-04-01 10:11:12 发布

阅读量8.5k

点赞数 8

分类专栏： vue进阶

本文链接：https://blog.csdn.net/moon_tang/article/details/105907769

版权

vue进阶专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue项目中遇到setInterval定时器不起作用的问题，并提供了使用箭头函数来解决该问题的解决方案，通过修改代码并添加注释，详细阐述了问题的原因及修复方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网上看到一篇Vue中使用定时器setInterval和setTimeou讲解得很好，但是放在自己代码中却不能实现定时器的作用，后来了解到是因为vue中要用箭头函数才能使setInterval起作用

解决方案

  this.timer = setInterval(this.get, 1000);

修改为

      var _this = this;  //注意，要有，因为有箭头函数所以this作用域不在是vue，而是定时器。我们要调用的是vue中的函数
      this.timer = setInterval(() => {
           _this.get();
    }, 3000);
    },

完整代码（建议细看代码注释）

<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);  
      
      //以下才正确
      var _this = this;  //注意，要有，因为有箭头函数所以this作用域不在是vue，而定时器。我们要调用的是vue中的函数
      this.timer = setInterval(() => {
           _this.get();
    }, 3000);
    },

	//注意，必须在页面销毁前关闭定时器，否则定时器会一直存在，一直进行操作，以前就遇到定时器没清除，造成浏览器内存溢出,内存占到89%，找了很久才找到原因
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>