JavaScript实现文本逐帧动画时sleep函数导致页面阻塞的解决方案咨询

嗨，我来帮你搞定这个动画问题～

你遇到的核心问题是JavaScript的单线程特性：如果用的是同步阻塞式的sleep函数（比如通过while循环耗时间的那种），它会霸占主线程，让浏览器根本没时间更新DOM——直到所有sleep执行完，才会一次性把最后一帧的内容渲染出来，中间的帧都被跳过了。

下面给你两个常用的解决方案，都能让动画逐帧正常显示：

方案一：用setTimeout链式调用 #

这种方式是利用异步定时器，让每一帧的更新都给浏览器留足渲染时间：

// 获取标签元素
const label = document.getElementById('label');
// 定义所有动画帧
const frames = [
  'ඞ______ _',
  '_ඞ_____ _',
  '__ඞ____ _',
  '___ඞ___ _'
];

let currentFrameIndex = 0;

// 定义切换帧的函数
function showNextFrame() {
  if (currentFrameIndex < frames.length) {
    // 更新当前帧内容
    label.innerHTML = frames[currentFrameIndex];
    currentFrameIndex++;
    // 500毫秒后调用下一次，实现逐帧切换
    setTimeout(showNextFrame, 500);
  }
}

// 启动动画
showNextFrame();

setTimeout是异步执行的，它会把后续的帧切换任务放到事件队列里，不会阻塞主线程，浏览器就能在两次定时器触发之间正常渲染当前帧的内容。

方案二：用async/await结合异步sleep #

如果你更习惯类似同步代码的写法，可以封装一个异步的sleep函数，配合async/await来实现：

// 封装异步sleep函数（不会阻塞主线程）
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 动画主函数
async function runAnimation() {
  const label = document.getElementById('label');
  const frames = [
    'ඞ______ _',
    '_ඞ_____ _',
    '__ඞ____ _',
    '___ඞ___ _'
  ];

  // 遍历每一帧，更新后等待500毫秒
  for (const frame of frames) {
    label.innerHTML = frame;
    await sleep(500);
  }
}

// 启动动画
runAnimation();

这里的sleep返回的是一个Promise，await会暂停runAnimation函数的执行，但不会阻塞整个主线程——浏览器可以在等待期间渲染当前帧，时间到了再继续执行下一帧的更新。

注意：一定要避免使用同步阻塞的sleep函数，那种写法会让页面完全卡住，用户体验极差～

备注：内容来源于stack exchange，提问作者Raphi-2Code