JavaScript 睡眠函数及异步编程中的应用240

在 JavaScript 中，我们经常需要暂停代码执行一段时间，模拟现实世界的等待或延迟。然而，JavaScript 是单线程的，这意味着它一次只能执行一个任务。不像某些多线程语言那样可以简单地使用 `sleep()` 函数阻塞线程，JavaScript 的 `sleep()` 函数并非原生支持，需要我们巧妙地利用异步编程的特性来实现类似的功能。

很多人初学 JavaScript 时，可能会尝试使用诸如 `while` 循环配合 `()` 来实现睡眠效果： ```javascript
function sleep(ms) {
const startTime = ();
while (() - startTime < ms) {}
}
sleep(1000); // 暂停 1 秒
("Sleep finished!");
```

这段代码看似实现了睡眠功能，但实际上它会阻塞主线程，导致浏览器或应用程序冻结，用户界面卡顿，甚至出现无响应的情况。这是因为 `while` 循环持续占用 CPU 资源，阻止其他任务执行。这在任何情况下都是不可取的，应该避免这种做法。

那么，在 JavaScript 中如何正确地实现“睡眠”呢？答案是利用异步编程中的 `setTimeout()` 或 `Promise` 对象。

使用 `setTimeout()` 实现延迟

`setTimeout()` 函数是 JavaScript 中的一个原生函数，它可以安排一个函数在指定的毫秒数后执行。这正是我们实现“睡眠”效果的理想工具。虽然它并不真正“睡眠”，而是将代码的执行延迟到指定时间后，但对于绝大多数场景来说，已经足够了。 ```javascript
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function myAsyncFunction() {
("Starting...");
await sleep(2000); // 暂停 2 秒
("Sleep finished!");
}
myAsyncFunction();
```

这段代码中，`sleep()` 函数返回一个 Promise 对象，`setTimeout()` 函数在指定的毫秒数后调用 `resolve()` 函数，从而使 Promise 对象进入 fulfilled 状态。`async/await` 语法使代码更易于阅读和理解，我们用 `await` 关键字等待 Promise 对象完成。

使用 `Promise` 和 `setTimeout()` 组合实现更灵活的延迟

除了简单的延迟，我们还可以通过 `Promise` 和 `setTimeout()` 的组合实现更复杂的延迟逻辑，例如，处理异步操作的结果后延迟一段时间再执行后续操作。```javascript
function delay(ms, message) {
return new Promise((resolve) => {
setTimeout(() => {
(message);
resolve();
}, ms);
});
}
async function complexOperation() {
await delay(1000, "Step 1 completed");
// ... some asynchronous operation ...
await delay(1500, "Step 2 completed");
// ... more asynchronous operation ...
}
complexOperation();
```

这段代码通过定义一个 `delay` 函数，实现了带有消息提示的延迟功能。在异步操作 `complexOperation` 中，我们依次执行多个步骤，每个步骤之间都插入适当的延迟，并打印相应的提示信息。