如何创建可延迟后续所有代码执行的JavaScript定时器？

先说明白：JavaScript是单线程异步模型，不存在不阻塞页面的同步延迟方法（要是硬写while循环死等，会直接卡死页面，绝对不能这么干），所以得靠异步方案实现后续代码延迟执行，下面是具体解决办法：

1. 把setTimeout包装成可await的函数 #

先给setTimeout套个Promise壳，这样就能用await写出像同步代码一样的延迟逻辑：

function timer(seconds) {
  // 把秒转成毫秒，返回Promise
  return new Promise(resolve => {
    setTimeout(resolve, seconds * 1000);
  });
}

2. 在async函数/模块顶级里直接用 #

如果你的代码本来就在async函数里，或者是ES模块的顶级作用域，直接用await就行：

// 模块顶级作用域例子
console.log(123);
await timer(2); // 等2秒
console.log(456); // 2秒后才输出

// async函数例子
async function run() {
  console.log(123);
  await timer(2);
  console.log(456);
}
run();

3. 不在async/模块顶级的情况怎么处理 #

要是代码不在上述环境（比如普通函数、全局非模块作用域），可以用**立即执行的异步函数（IIFE）**把延迟逻辑包起来：

console.log(123);
// 用IIFE创建异步上下文
(async () => {
  await timer(2);
  console.log(456);
})();

嫌async/await麻烦的话，也可以直接用Promise的.then()链式调用：

console.log(123);
timer(2).then(() => {
  console.log(456);
});

为啥不能直接await setTimeout？ #

setTimeout返回的是个定时器ID数字，不是Promise对象，而await只能处理Promise或者支持then方法的对象，所以必须先把它包装成Promise才能用await。

绝对别用的错误写法 #

别搞同步阻塞的延迟（比如while循环死等），这会让整个JS线程卡死，页面直接失去响应：

// 错误示例！绝对禁用！
function badTimer(seconds) {
  const endTime = Date.now() + seconds * 1000;
  while (Date.now() < endTime) {} // 卡死线程
}
console.log(123);
badTimer(2);
console.log(456);

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