如何停止并重启用于时间检测的无限循环函数

兄弟，你遇到的问题核心是没正确保存和使用定时器的ID！clearTimeout() 接收的参数不是你写的函数本身，而是每次调用 setTimeout() 时返回的唯一定时器ID，所以你之前直接传 infiniteloop 肯定没用～

我给你调整一下代码，保证能正确停止旧循环再启动新的：

第一步：保存定时器ID #

先在函数外部定义一个变量来存定时器ID，这样我们能随时拿到它来取消定时器：

// 在合适的作用域（比如全局或组件实例内）定义定时器ID变量
let timerId;

第二步：修改循环函数，更新定时器ID #

每次调用 setTimeout() 时，把返回的ID赋值给 timerId，这样后续就能精准清除它：

function infiniteloop(){
  let now = moment();
  const start = moment(myStartTime); // 建议加const，避免意外修改变量
  const end = moment(myEndTime);

  if (now.isBetween(start, end)) {
    console.log('This is happening now')
  } else  {
    console.log('This is not happening now')
  }

  // 把新的定时器ID存起来
  timerId = setTimeout(infiniteloop, 5000);
}

第三步：封装重启逻辑 #

当 myStartTime 或 myEndTime 变化时，调用这个重启函数就行：

function restartLoop() {
  // 如果之前有正在运行的定时器，先清除它
  if (timerId) {
    clearTimeout(timerId);
  }
  // 启动新的循环
  infiniteloop();
}

第四步：初始化和触发重启 #

• 页面渲染时，直接调用 infiniteloop() 启动第一次循环；
• 当你的时间变量变化时（比如用户修改了开始/结束时间），调用 restartLoop() 就能停止旧循环，启动新的了！

为啥之前的方法没用？因为每个 setTimeout() 都会生成一个独立的定时器，只有通过它返回的ID才能精准取消对应的定时器，直接传函数是找不到要取消的定时器的，自然就会出现多个循环同时运行的情况～

备注：内容来源于stack exchange，提问作者Torf