Vuejs2中setTimeout仅执行一次，无法重复触发函数问题求助

嗨，我来帮你搞明白为啥代码只打印一次～

你遇到的核心问题是对setTimeout的功能理解有点偏差：setTimeout只会在指定延迟时间后执行一次目标函数，这就是为啥你只看到一次"test.."输出的原因。如果想要实现每隔1秒重复打印的效果，有两种常用的方案，我结合你的Vue场景给你详细说明：

方案一：使用setInterval（固定间隔重复执行） #

setInterval的作用就是每隔指定时间重复执行一次函数，刚好符合你的需求。需要注意的是要保存定时器ID，在组件卸载时清除它，避免内存泄漏：

<script>
export default {
  mounted() {
    this.startRepeatedLog();
  },
  methods: {
    startRepeatedLog() {
      // 把定时器ID存在实例上，方便后续清除
      this.intervalTimer = setInterval(() => {
        console.log("test..");
        // 这里可以放心使用this，箭头函数会保留当前上下文
        // 比如调用其他组件方法：this.someOtherMethod()
      }, 1000);
    }
  },
  beforeUnmount() {
    // 组件卸载前一定要清除定时器！
    clearInterval(this.intervalTimer);
  }
};
</script>

方案二：递归调用setTimeout（更灵活的重复执行） #

如果你需要更灵活的控制（比如满足某个条件就停止重复），可以在setTimeout的回调里递归调用自身。这种方式的好处是，只有上一次函数执行完成后，才会开始下一次的延迟计时，不会出现setInterval可能导致的函数叠加执行问题：

<script>
export default {
  data() {
    return {
      isRunning: true // 用来控制是否继续重复执行的开关
    };
  },
  mounted() {
    this.startRepeatedLog();
  },
  methods: {
    startRepeatedLog() {
      setTimeout(() => {
        if (!this.isRunning) return; // 开关关闭就停止
        
        console.log("test..");
        // 这里同样可以使用this执行其他操作
        this.startRepeatedLog(); // 递归调用，实现重复执行
      }, 1000);
    }
  },
  beforeUnmount() {
    // 组件卸载时关闭开关，终止递归
    this.isRunning = false;
  }
};
</script>

小提醒 #

不管用哪种方案，一定要在组件卸载时清除定时器/终止递归，否则组件销毁后定时器还在后台运行，会造成不必要的内存浪费哦～

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