如何在JavaScript顶级作用域实现可直接调用的阻塞式sleep函数？

我需要在JavaScript里用sleep函数，试过基于Promise的版本，但得配合await才能生效，而且JS不允许在顶级作用域直接用await：

function sleep(milliseconds) {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
}

await sleep(5); // 无效

我希望能像这样直接调用sleep，不用异步语法：

let i = 10;
while (i > 0) {
    console.log("sleeping..." + i);
    sleep(1);
    i--;
}

console.log("Hello");

sleep(5);

console.log("World");

请问有没有可行的实现方式？

首先明确：JavaScript是单线程异步模型，不推荐实现真正的同步阻塞sleep，因为会卡住整个执行线程（浏览器里导致页面无响应，Node.js里阻塞所有后续任务）。但如果一定要实现，有两种思路：

1. 同步阻塞式sleep（不推荐） #

用while循环占据事件循环，直到指定时间过去：

function sleep(milliseconds) {
    const start = Date.now();
    while (Date.now() - start < milliseconds) {
        // 空循环，持续阻塞线程
    }
}

// 按需求调用：
let i = 10;
while (i > 0) {
    console.log("sleeping..." + i);
    sleep(1000); // 改成1000毫秒更易观察效果，1毫秒几乎无感知
    i--;
}

console.log("Hello");
sleep(5000);
console.log("World");

这种方式的问题是：执行sleep时，JS线程被完全占用，浏览器无法处理用户交互、页面渲染，Node.js无法处理其他请求或异步任务，体验极差。

2. 异步但写法接近同步（推荐） #

既然原生不支持顶级await，你可以把代码包裹在自执行async函数里，合法使用await，同时不会阻塞线程：

function sleep(milliseconds) {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
}

// 自执行async函数
(async function() {
    let i = 10;
    while (i > 0) {
        console.log("sleeping..." + i);
        await sleep(1000);
        i--;
    }

    console.log("Hello");
    await sleep(5000);
    console.log("World");
})();

这种方式的优势是：sleep时不会阻塞线程，浏览器/Node.js可正常处理其他任务，代码逻辑仍按预期顺序执行，符合JS异步设计理念。

另外，ES2022起，部分环境（最新浏览器、Node.js 14.8+）支持顶级await，可直接在脚本中使用await，无需包裹函数：

function sleep(milliseconds) {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
}

// 顶级await（需环境支持）
let i = 10;
while (i > 0) {
    console.log("sleeping..." + i);
    await sleep(1000);
    i--;
}

console.log("Hello");
await sleep(5000);
console.log("World");

写法更简洁，但需注意兼容性，旧环境可能不支持。

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