如何为JavaScript排序可视化项目添加全局重置/终止按钮以停止所有函数执行

要终止递归类排序算法（如归并、快速排序）并重置页面状态，核心是通过全局终止标记+统一管理定时器ID实现，以下是具体步骤：

1. 定义全局状态变量 #

首先声明全局变量，用来控制排序状态、记录所有定时器ID，以及保存初始数组的备份：

// 标记是否正在排序，false时终止所有递归步骤
let isSorting = false;
// 存储所有排序步骤中用到的定时器ID，用于批量清除
const activeTimers = [];
// 保存初始数组，用于重置时恢复
let originalArray = [];

2. 改造递归排序函数 #

所有排序函数（包括递归分支）的每一步都先检查isSorting状态，一旦为false立即终止执行；同时将可视化延迟用的setTimeout返回ID存入activeTimers数组。

以归并排序为例：

function mergeSort(arr, left, right) {
  // 第一步先检查终止标记，直接退出递归
  if (!isSorting) return;
  
  if (left < right) {
    const mid = Math.floor((left + right) / 2);
    
    // 递归左半部分前检查标记
    if (!isSorting) return;
    mergeSort(arr, left, mid);
    
    // 递归右半部分前检查标记
    if (!isSorting) return;
    mergeSort(arr, mid + 1, right);
    
    // 合并步骤添加延迟可视化，记录定时器ID
    const timerId = setTimeout(() => {
      if (!isSorting) return; // 执行前再做一次检查
      merge(arr, left, mid, right);
      updateVisualization(arr); // 更新DOM展示的函数
    }, 150);
    activeTimers.push(timerId);
  }
}

快速排序的改造逻辑类似，在分区、递归调用前后都加入isSorting检查：

function quickSort(arr, low, high) {
  if (!isSorting) return;
  if (low < high) {
    const pi = partition(arr, low, high);
    
    const timerId1 = setTimeout(() => {
      if (!isSorting) return;
      quickSort(arr, low, pi - 1);
    }, 150);
    activeTimers.push(timerId1);
    
    const timerId2 = setTimeout(() => {
      if (!isSorting) return;
      quickSort(arr, pi + 1, high);
    }, 150);
    activeTimers.push(timerId2);
  }
}

3. 实现重置按钮的点击逻辑 #

点击重置按钮时，依次执行：终止排序标记、清除所有定时器、恢复初始数组并重置DOM：

document.getElementById('resetBtn').addEventListener('click', () => {
  // 1. 触发终止标记，让递归函数停止执行
  isSorting = false;
  
  // 2. 清除所有未执行的定时器
  activeTimers.forEach(timerId => clearTimeout(timerId));
  activeTimers.length = 0; // 清空定时器数组
  
  // 3. 重置数组为初始状态，恢复DOM展示
  const resetArray = [...originalArray];
  resetVisualization(resetArray); // 重置DOM的函数，恢复初始样式和数组展示
});

4. 排序按钮的初始化处理 #

每次点击排序按钮前，先清空之前的排序状态，避免多个排序任务冲突：

document.getElementById('mergeSortBtn').addEventListener('click', () => {
  // 先终止可能在运行的排序
  isSorting = false;
  activeTimers.forEach(timerId => clearTimeout(timerId));
  activeTimers.length = 0;
  
  // 保存当前数组为初始备份（假设getCurrentDisplayArray()获取当前DOM展示的数组）
  originalArray = getCurrentDisplayArray();
  
  // 启动新的排序任务
  isSorting = true;
  mergeSort([...originalArray], 0, originalArray.length - 1);
});

关键注意事项 #

• 递归的每个分支都必须加入isSorting检查，避免遗漏未终止的递归调用
• 所有涉及可视化延迟的setTimeout都要记录ID，确保能被完全清除
• 排序时操作数组副本，不要直接修改原备份数组，保证重置时数据准确

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