如何让JavaScript脚本在执行下一行前等待？附HTML示例代码

JavaScript是单线程异步语言，不能用阻塞式的“sleep”直接卡死线程（会导致页面无响应），得用异步方式实现等待效果，下面是两种常用方案：

方案1：使用async/await + setTimeout（推荐，代码更直观） #

把点击事件处理函数改成async函数，再封装一个返回Promise的等待函数，用await触发等待：

<button id="bttn">点击等待</button>

<script>
const button = document.getElementById("bttn");

// 封装等待函数，参数是等待毫秒数
function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

button.onclick = async function() {
  console.log("开始执行，准备等待2秒");
  // 等待2000毫秒（2秒）后再执行后续代码
  await wait(2000);
  console.log("等待结束，执行后续逻辑");
  // 在这里写你需要延迟执行的代码
};
</script>

方案2：使用Promise链式调用（兼容旧环境） #

如果你的运行环境不支持async/await，可以用Promise的then方法实现：

<button id="bttn">点击等待</button>

<script>
const button = document.getElementById("bttn");

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

button.onclick = function() {
  console.log("开始执行，准备等待2秒");
  wait(2000).then(() => {
    console.log("等待结束，执行后续逻辑");
    // 在这里写你需要延迟执行的代码
  });
};
</script>

注意：绝对不要用同步循环来模拟等待（比如while(Date.now() < 某个时间)），这种方式会让浏览器彻底卡住，用户无法操作页面。

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