Vue中如何在其他函数内访问并清除setInterval定时器

问题原因 #

你在timer方法中创建的定时器ID被赋值给了局部变量var myTimer，该变量仅在timer方法作用域内有效，没有同步到Vue实例的myTimer数据字段中，因此next()方法中访问this.myTimer时只能拿到初始的空值，无法执行清理操作。

修正方案 #

只需要修改timer方法的赋值逻辑，把定时器ID直接挂载到Vue实例上即可，同时补充两个常用优化点：

• 手动切换后如果需要恢复自动轮播，切换完成后重新启动定时器
• 组件销毁时清理定时器，避免内存泄漏

修正后的完整逻辑代码如下：

export default {
  data: () => ({
    number: 0,
    myTimer: null, // 初始化定时器字段为null
    // 此处补充你自己定义的Images数组
  }),
  mounted:function() {
    this.$nextTick(() => {
      this.timer();
    });
  },
  // 组件销毁前清理定时器避免内存泄漏
  beforeDestroy() {
    clearInterval(this.myTimer)
  },
  methods:{ 
    timer: function() {
      // 直接把定时器ID赋值给实例的myTimer字段，不要声明局部变量
      this.myTimer = setInterval(this.counter, 3000);
    },
    counter:function(){
      if(this.number >= (this.Images.length -1)){
        this.number = 0;
      }else{
        this.number +=1;
      }
    },
    next() {
      // 清理现有定时器
      clearInterval(this.myTimer)      
      if(this.number >= (this.Images.length -1)){
        this.number = 0;
      }else{
        this.number +=1;
      }
      // 如果需要手动切换后恢复自动轮播，重新调用timer启动定时器即可
      this.timer()
    },
    // prev方法逻辑参考next实现即可，仅修改number的增减规则
    prev() {
      clearInterval(this.myTimer)
      if(this.number <= 0){
        this.number = this.Images.length -1
      }else{
        this.number -=1
      }
      this.timer()
    }
  }
}

内容的提问来源于stack exchange，提问作者Brian