如何通过点击按钮在JavaScript中终止运行中的循环

核心问题是同步循环会阻塞主线程：当你用普通for循环遍历数组时，代码会一次性执行完整个循环，期间浏览器根本没时间处理「停止」按钮的点击事件——也就是说，你点击按钮修改stop变量的操作，要等循环完全结束后才会生效，自然没法终止正在运行的循环。

下面是两种可行的异步实现方案：

方案一：异步递归（setTimeout） #

这种方式通过递归调用setTimeout，让每次遍历之间给主线程留出处理事件的时间：

<button id="startBtn">开始</button>
<button id="stopBtn">停止</button>

<script>
let stop = 0;
const targetArray = [0, 1, 2, 3, 4, 5];
let currentIndex = 0;

function iterate() {
  // 检查停止标志，终止递归
  if (stop === 1) return;
  // 遍历完成后重置索引或直接停止
  if (currentIndex >= targetArray.length) {
    currentIndex = 0;
    return;
  }
  console.log(`当前索引：${currentIndex}`);
  currentIndex++;
  // 异步调用，让出主线程
  setTimeout(iterate, 100);
}

document.getElementById('startBtn').addEventListener('click', () => {
  stop = 0;
  // 避免重复启动遍历
  if (currentIndex === 0) iterate();
});

document.getElementById('stopBtn').addEventListener('click', () => {
  stop = 1;
});
</script>

方案二：定时器循环（setInterval） #

用setInterval定时执行遍历逻辑，同时主动管理定时器的启停：

<button id="startBtn">开始</button>
<button id="stopBtn">停止</button>

<script>
let stop = 0;
const targetArray = [0, 1, 2, 3, 4, 5];
let currentIndex = 0;
let intervalId = null;

document.getElementById('startBtn').addEventListener('click', () => {
  stop = 0;
  currentIndex = 0;
  // 清除之前的定时器，防止多个循环同时运行
  if (intervalId) clearInterval(intervalId);
  
  intervalId = setInterval(() => {
    if (stop === 1) {
      clearInterval(intervalId);
      return;
    }
    if (currentIndex >= targetArray.length) {
      clearInterval(intervalId);
      return;
    }
    console.log(`当前索引：${currentIndex}`);
    currentIndex++;
  }, 100);
});

document.getElementById('stopBtn').addEventListener('click', () => {
  stop = 1;
  if (intervalId) clearInterval(intervalId);
});
</script>

关键注意点 #

• 必须用异步方式（setTimeout/setInterval）让主线程有机会处理按钮点击事件，这样stop变量的修改才能被循环实时检测到
• 启动新循环前要清除之前的定时器/递归状态，避免出现多个循环同时运行的情况

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