JS 睡眠|极客笔记

JS 睡眠

在编程中，有时候我们需要让代码在执行过程中暂停一段时间，这就是所谓的“睡眠”。在 JavaScript 中，并没有类似于其他编程语言中的 sleep 函数。但是，我们可以通过一些技巧来实现 JS 的睡眠功能。

在本文中，我将详细讨论如何在 JavaScript 中实现睡眠功能，提供几种不同的实现方式，并给出代码示例和运行结果。

方法一：使用 setTimeout()

最常见的实现睡眠功能的方法是使用 setTimeout() 函数。这个函数可以在指定的时间后执行一个函数或一段代码。

下面是一个简单的示例代码：

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

// 使用示例
console.log('开始执行');
sleep(2000).then(() => {
    console.log('睡眠结束，2秒后打印这句话');
});

在上面的代码中，我们定义了一个 sleep 函数，它接受一个参数 ms，代表需要睡眠的时间（单位为毫秒）。然后，我们使用 Promise 对象来实现异步操作，借助 setTimeout() 函数来实现睡眠效果。

当我们调用 sleep(2000) 时，代码会暂停执行 2 秒钟，然后输出 “睡眠结束，2秒后打印这句话”。

方法二：使用 async/await

另一种常见的实现睡眠功能的方法是使用 async/await。通过将 setTimeout() 函数包装在一个 Promise 中，我们可以使用 async/await 来实现更直观的睡眠效果。

下面是一个使用 async/await 的示例代码：

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

// 使用示例
async function main() {
    console.log('开始执行');
    await sleep(3000);
    console.log('睡眠结束，3秒后打印这句话');
}

main();

在上面的代码中，我们定义了一个 main 函数，使用 async/await 将 setTimeout() 函数包装在 sleep 函数中。当我们调用 main() 函数时，代码会暂停执行 3 秒钟，然后输出 “睡眠结束，3秒后打印这句话”。

方法三：使用 Generator 函数

除了使用 Promise 和 async/await，我们还可以使用 Generator 函数来实现睡眠功能。Generator 函数是 ES6 中新增的一种特殊函数，可以在函数执行过程中暂停和恢复。

下面是一个使用 Generator 函数的示例代码：

function* sleepGenerator(ms) {
    yield new Promise(resolve => setTimeout(resolve, ms));
}

// 使用示例
const myGenerator = sleepGenerator(4000);
console.log('开始执行');
myGenerator.next().value.then(() => {
    console.log('睡眠结束，4秒后打印这句话');
});

在上面的代码中，我们定义了一个 Generator 函数 sleepGenerator，使用 yield 关键字暂停和恢复函数的执行。当我们调用 myGenerator.next().value 时，代码会暂停执行 4 秒钟，然后输出 “睡眠结束，4秒后打印这句话”。