如何在JavaScript中实现间隔暂停脚本并逐段输出文本？

为什么你的代码会一次性输出所有内容 #

你写的wait函数是通过同步循环实现等待的，这种方式会阻塞浏览器主线程——浏览器必须等整个脚本执行完毕后才会更新页面渲染，所以两次document.write的内容会在脚本全部跑完后才一起显示出来。

正确的实现方式 #

方法1：使用setTimeout（基础异步方式） #

setTimeout是JavaScript的异步定时器，不会阻塞主线程，能让浏览器在等待期间正常更新页面：

<script>
// 先输出第一部分文本
document.write('hello');
// 1秒后输出第二部分内容
setTimeout(function() {
  document.write(' how are you?');
}, 1000);
</script>

如果需要多步输出，可以嵌套setTimeout：

<script>
document.write('第一步：');
setTimeout(function() {
  document.write('输出第一行<br>');
  setTimeout(function() {
    document.write('等待1秒后输出第二行<br>');
    setTimeout(function() {
      document.write('再等1秒输出最后一行');
    }, 1000);
  }, 1000);
}, 1000);
</script>

方法2：使用async/await（更简洁的异步方式） #

如果觉得嵌套setTimeout太繁琐，可以用ES6的async/await语法，先把等待逻辑改成返回Promise的异步函数：

<script>
// 重构wait函数，返回Promise实现异步等待
function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 用async包裹执行逻辑
async function printStepByStep() {
  document.write('hello');
  await wait(1000); // 等待1秒，不会阻塞主线程
  document.write(' how are you?');
}

// 执行分步输出函数
printStepByStep();
</script>

这种写法和你原来的同步代码逻辑接近，但不会阻塞页面渲染，适合多步输出场景。

额外建议 #

尽量避免使用document.write，现代开发中更推荐操作DOM元素（比如修改指定<div>的内容），既灵活又不会覆盖页面原有内容：

<div id="output"></div>
<script>
const outputEl = document.getElementById('output');

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function print() {
  outputEl.textContent += 'hello';
  await wait(1000);
  outputEl.textContent += ' how are you?';
}

print();
</script>

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