嘿，这个问题我太懂了！你现在遇到的是JavaScript单线程事件循环的经典陷阱——你的同步阻塞式wait函数把浏览器主线程彻底卡死了，根本没给DOM渲染留机会，所以才会先卡顿半天，然后一次性把所有内容吐出来。

为什么原代码不行？ #

你写的wait函数是用do-while循环一直在占用主线程：

function wait(ms) {
  var d = new Date();
  var d2 = null;
  do { d2 = new Date(); } while (d2 - d < ms);
}

这种同步阻塞的写法会让浏览器的所有其他任务（包括DOM渲染、用户交互）都被挂起，直到整个runTest的50次循环全部执行完毕。只有当主线程空闲下来，浏览器才会一次性更新DOM，自然就看不到逐个添加的效果了。

解决方案一：用setTimeout递归（经典写法） #

我们可以把每次添加字符的操作放到setTimeout的回调里，这样浏览器会在处理完当前DOM渲染后，再等待2秒执行下一次添加：

<div id="here"></div>
<script>
function runTest() {
  let cnt = 0;
  const addChar = () => {
    if (cnt < 50) {
      const targetDiv = document.getElementById("here");
      targetDiv.innerHTML += "X + ";
      cnt++;
      setTimeout(addChar, 2000); // 2秒后执行下一次添加
    }
  };
  addChar(); // 启动第一个添加操作
}
runTest();
</script>

setTimeout会把回调函数放到浏览器的事件队列中，主线程处理完当前的DOM更新后，才会执行这个回调，这样就能保证每次添加字符后，浏览器都有机会渲染页面，实现逐个显示的效果。

解决方案二：用async/await（现代优雅写法） #

如果你习惯更现代的异步写法，可以把wait改成返回Promise的异步函数，结合async/await来实现：

<div id="here"></div>
<script>
// 把同步wait改成异步的Promise版本
function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest() {
  const targetDiv = document.getElementById("here"); // 提前获取DOM元素，提升性能
  for (let cnt = 0; cnt < 50; cnt++) {
    targetDiv.innerHTML += "X + ";
    await wait(2000); // 等待2秒，但不会阻塞主线程
  }
}
runTest();
</script>

await会暂停runTest函数的执行，把控制权交还给浏览器，让它完成当前的DOM渲染，等2秒后再继续循环。这种写法逻辑更清晰，和你原来的同步循环结构很像，但完全不会阻塞主线程。

小优化建议 #

• 提前获取目标DOM元素（比如上面代码里的targetDiv），不要每次循环都调用getElementById，减少DOM查询开销。
• 如果后续要添加的内容包含特殊字符，建议用document.createTextNode和appendChild代替innerHTML，避免潜在的XSS风险或渲染问题：

  targetDiv.appendChild(document.createTextNode("X + "));
  

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