如何停止循环内的setTimeout/setInterval并实现暂停续播功能？

我在Stack Overflow上查了很多类似帖子，但没找到符合需求的解决方案。

需求场景：

• 点击播放按钮，带延迟执行完102次迭代（用于可视化），直到点击暂停
• 暂停时停在当前迭代步骤，用curStp变量记录当前位置
• 再次点击播放时，从暂停位置继续执行

当前问题：点击暂停后，循环不会停止，会执行完所有102次迭代。

尝试的setTimeout代码 #

<button onclick="mouseup()">Run Code</button>
<button onclick="pause()">Pause Code</button>

let flag = 0;
const delay = 300;
const totalStps = 102;
var curStp = 0;

function mouseup() {
  let i = 0;
  console.log("Value of flag " + flag);
  while(i < totalStps - curStp) {
    const j = i;
    var timeout = setTimeout(function(){
       let stp = curStp;
       console.log("i " + i + "  j " + j + " curStp " + curStp);
       
       curStp = stp+1;   // 实际项目中用setState更新
       console.log("flag " + flag + " timeout " + timeout);
        }, delay * i);
        
    if (flag === 1) {
       console.log("break the loop");
       clearTimeout(timeout);
       // 这里无法停止已设置的setTimeout
       break;
    }
    i++;
  } 
}

function pause() {
  flag = 1;
  console.log("Value of flag in pause()  " + flag + " curStp " + curStp);
  let stp = curStp;
  curStp = stp;   // 实际项目中用setState更新
}

尝试的setInterval代码 #

<button onclick="mouseup()">Run Code</button>
<button onclick="pause()">Pause Code</button>

let flag = 0;
const delay = 300;
const totalStps = 102;
var curStp = 0;

function mouseup() {
  let i = 0;
  console.log("Value of flag " + flag);
  while(i < totalStps - curStp) {
    const j = i;
    (function(i) {
    var timeout = setInterval(function(){
       let stp = curStp;
       console.log("i " + i + "  j " + j + " curStp " + curStp);
       
       curStp = stp+1;   // 实际项目中用setState更新
       console.log("flag " + flag + " timeout " + timeout);
        }, delay * i)
    })(i);
    if (flag === 1) {
       console.log("break the loop");
       clearInterval(timeout);
       // 无法停止已设置的setInterval
       break;
    }
    i++;
  } 
}

function pause() {
  flag = 1;
  console.log("Value of flag in pause()  " + flag + " curStp " + curStp);
  let stp = curStp;
  curStp = stp;   // 实际项目中用setState更新
}

问题根源 #

你的代码逻辑有三个核心错误：

1. 同步循环瞬间创建所有定时器：点击播放后，while循环会在极短时间内创建所有totalStps - curStp个定时器，此时flag还是0，不会触发break。等你点击暂停时，所有定时器已经排入任务队列，自然无法停止后续执行。
2. 仅清理最后一个定时器：即使触发break，你只清除了当前循环最后创建的那个定时器，之前创建的所有定时器依然会执行。
3. setInterval用法错误：给每个setInterval设置delay * i的间隔，导致多个间隔不同的定时器同时运行，瞬间执行所有步骤。

正确实现方案 #

应该用单个定时器逐步执行，每次执行完当前步骤后，判断是否需要继续创建下一个定时器，同时维护定时器ID方便暂停时清除。

<button onclick="startExecution()">Run Code</button>
<button onclick="pauseExecution()">Pause Code</button>

const delay = 300;
const totalStps = 102;
let curStp = 0;
let currentTimerId = null; // 保存当前定时器ID，用于暂停
let isPaused = false; // 标记暂停状态

function startExecution() {
  if (isPaused) {
    isPaused = false;
    executeNextStep();
    return;
  }
  // 已执行完所有步骤时，重置后重新开始
  if (curStp >= totalStps) {
    curStp = 0;
  }
  executeNextStep();
}

function executeNextStep() {
  // 已暂停或执行完所有步骤，停止执行
  if (isPaused || curStp >= totalStps) {
    return;
  }
  
  // 这里替换成你的可视化逻辑
  console.log(`执行步骤：${curStp + 1}`);
  
  curStp++;
  
  // 设置下一个步骤的定时器
  currentTimerId = setTimeout(executeNextStep, delay);
}

function pauseExecution() {
  isPaused = true;
  // 清除当前等待的定时器，避免继续执行下一个步骤
  clearTimeout(currentTimerId);
  console.log(`暂停在步骤：${curStp}`);
}

方案优势 #

• 逐步创建定时器：每次只生成下一个步骤的定时器，不会一次性堆积所有任务，确保暂停能终止后续执行。
• 状态清晰：用isPaused标记暂停状态，currentTimerId管理当前等待的定时器，逻辑直观。
• 支持断点续行：暂停后点击播放，直接从curStp记录的位置继续执行。
• 自动终止：当curStp达到totalStps时，自动停止执行。

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