Canvas排序可视化需“每步清空、重绘、高亮”，因JS主线程阻塞导致for循环无法呈现动画；须用requestAnimationFrame+状态控制实现帧调度，确保暂停/继续可靠、绘制不卡顿、高亮精准。
canvas 排序可视化不是靠“画完再动”，而是靠「每步清空、重绘、高亮」实现的。不拆解算法步骤、不控制帧节奏，就只能看到结果闪一下——这不是可视化，是刷新。
为什么直接用 for 循环跑排序看不到动画？
浏览器渲染线程和 JS 主线程共享，for 循环一气呵成执行完，DOM 或 canvas 只会在整个函数返回后统一重绘一次。你写的 drawBars(arr) 被调了十次，但用户只看到最后一次。
- 根本原因：没有让出主线程控制权，浏览器没机会渲染中间帧
- 常见错误写法：
for (let i = 0; i —— 这不会逐帧显示 - 正确方向：必须用异步切片（
setTimeout、Promise或requestAnimationFrame）把每一步“挂起”再恢复
怎么让冒泡排序在 canvas 上真正动起来？
关键不是改算法逻辑，而是把它变成「可中断、可回调、带状态输出」的过程。下面是最简可行结构：
- 把交换动作抽出来，每次只做一次比较+可能的交换，然后调用
updateView(arr, i, j) -
updateView内部用setTimeout延迟下一次执行，形成节奏感（比如speed = 50ms/步） - 高亮参数（如
[i, j]）传给绘制函数，让drawBars知道该用什么颜色画哪几根柱子 - 避免在循环里直接操作原始数组引用；用
arr.slice()或深拷贝保留每步快照（调试时有用）
示例节选：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
function bubbleSortStep(arr, i, j, resolve) {
if (arr[j] > arr[j + 1]) {
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
}
if (j < arr.length - i - 2) {
setTimeout(() => bubbleSortStep(arr, i, j + 1, resolve), speed);
} else if (i < arr.length - 1) {
setTimeout(() => bubbleSortStep(arr, i + 1, 0, resolve), speed);
} else {
resolve();
}
}
drawBars 怎么画才不卡、不糊、能高亮？
Canvas 渲染性能很敏感，高频 clearRect + 全量重绘没问题，但细节处理不好会掉帧或错位。
- 柱宽计算别用浮点除法累积误差：
const barWidth = Math.floor(canvas.width / arr.length); - 高度映射要归一化：用
Math.min(arr[i], canvas.height * 0.9)防止柱子冲出画布 - 高亮逻辑写在绘制循环内，不要额外遍历数组：
if (highlightIndices.includes(i)) ctx.fillStyle = 'red'; else ctx.fillStyle = 'steelblue'; - 别在
drawBars里做 DOM 查询（如document.getElementById），提取上下文（ctx）为闭包变量
暂停/继续功能为什么总失效？
本质是控制异步流程的执行开关，不是简单设个 isPaused 就行。常见失效点：
- 用
setTimeout链时，暂停只是“不再发起下一步”，但正在等待的定时器仍会触发 → 必须用递归 + 回调模式，每次进入前检查状态 - 没清除已设定但未执行的定时器，导致暂停后一堆延迟任务扎堆执行
- 把
isPaused放在局部作用域，不同步到所有嵌套层级 → 应放在全局状态对象或闭包中统一管理 - 重置数组后没重置动画步数计数器或递归深度，导致后续播放错乱
最稳做法：用 requestAnimationFrame 驱动主循环，内部用 if (!paused) doNextStep() 控制，比纯 setTimeout 更精准且易中断。
实际做下来，最难的从来不是画柱子，而是让每一步“停得住、看得清、控得准”。算法逻辑可以抄，但帧调度、状态同步、异常恢复这些细节，漏一个就会让整个演示变成幻灯片。
