如何清除或跳过自定义sleep()函数，实现点击指定元素后停止倒计时

原有代码的sleep函数没有设计中断机制，定时器ID也未对外暴露，所以无法直接终止等待流程。可以通过增加终止标记、暴露定时器ID的方式实现需求，具体修改如下：

完整修改代码 #

JS部分 #

let timeoutId = null;
let isStopped = false;

function sleep(ms) {
  return new Promise(resolve => {
    timeoutId = setTimeout(resolve, ms);
  });
}

$('#target').click(function(e) {
  e.preventDefault();
  isStopped = true;
  // 清除正在运行的定时器，直接跳过sleep等待
  if (timeoutId) {
    clearTimeout(timeoutId);
    timeoutId = null;
  }
});

async function start() {
  // 启动前重置状态，避免上次终止操作影响新倒计时
  isStopped = false;
  for (let index = 0; index < 5; index++) {
    // 执行前检查是否触发终止
    if (isStopped) break;
    await sleep(1000);
    // 等待结束后二次检查，避免是清除定时器触发的提前结束
    if (isStopped) break;
    $('#timer').text(index);
  }
}

start();

HTML部分和原有代码保持一致即可。 #

实现逻辑 #

• 新增isStopped状态变量，用来标记是否需要终止倒计时流程
• 新增timeoutId变量存储sleep内部的定时器ID，点击目标元素时直接清除该定时器，让正在等待的sleep函数立即结束，跳过剩余等待时间
• 循环执行的每个阶段都检查终止标记，触发终止时直接跳出循环，不再执行后续的倒计时更新逻辑

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