setInterval 触发，清除

### 使用 `setInterval` 和 `clearInterval` 的最佳实践

在 JavaScript 中，`setInterval()` 函数用于按照指定的时间间隔（以毫秒计）来定期执行注册的回调函数。为了确保资源的有效管理和避免内存泄漏，当不再需要定时任务时，应当使用 `clearInterval()` 来停止这些周期性的调用。

#### 基本语法与示例

定义一个每秒钟打印当前时间的任务：

let intervalId = setInterval(() => {
    console.log(new Date().toLocaleTimeString());
}, 1000);

这段代码会每隔一秒输出一次系统本地时间到控制台[^1]。

#### 安全地清除定时器

为了避免意外创建多个相同的定时器实例，可以在每次设置新的定时器前先尝试清理旧有的定时器。这可以通过检查并重置全局变量中的定时器 ID 实现:

function setSafeTimer(callback, delay) {
    // 如果已经存在之前的定时器，则先行销毁它
    if (window.intervalId !== undefined) {
        clearInterval(window.intervalId);
    }
    
    window.intervalId = setInterval(callback, delay);
}

此方法有助于预防因重复点击按钮或其他交互行为而导致同一逻辑被执行多遍的情况发生[^3]。

#### Vue 组件生命周期内的处理方式

对于基于框架的应用开发场景下，比如 Vue.js ，推荐利用组件钩子来进行更优雅的操作。具体来说就是在组件挂载完成后启动定时器，并且在卸载阶段自动终止它们以释放关联资源：

export default {
  data() {
    return {
      timer: null,
    };
  },
  
  methods: {
    heartbeat() {
      console.log('Heartbeat');
    }
  },

  mounted() {
    this.timer = setInterval(this.heartbeat.bind(this), 5000);

    // 确保即使页面刷新也能正常移除监听
    this.$once('hook:beforeDestroy', () => {
      if (this.timer) {
          clearInterval(this.timer);
      }
    });
  }
};

上述做法不仅能够保证良好的用户体验，同时也遵循了现代前端应用的良好编码习惯[^4]。