JS 睡眠3秒|极客笔记

JS 睡眠3秒

在编写 JavaScript 代码时，有时候我们希望执行某个任务之后等待一定的时间再继续执行下一个任务。这就涉及到了”睡眠”操作，即让当前线程暂停一段时间再继续执行。

在传统的编程语言中，通常会使用一些特定的函数或方法来实现睡眠功能。但是在 JavaScript 中，由于其单线程的特性，没有提供内置的睡眠函数。但是我们可以通过一些技巧来实现睡眠的效果。

本文将详细介绍在 JavaScript 中如何实现睡眠3秒的功能，同时讨论一些注意事项和替代方案。

使用 setTimeout 函数实现睡眠

在 JavaScript 中，我们可以使用 setTimeout 函数来实现睡眠的效果。setTimeout 函数可以设置一个定时器，在指定的时间后执行回调函数。结合定时器和回调函数，我们可以实现睡眠的效果。

下面是一个简单的示例代码，实现在 JavaScript 中睡眠3秒的功能：

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

async function run() {
  console.log('开始睡眠');
  await sleep(3000);
  console.log('睡眠结束');
}

run();

在上述代码中，定义了一个 sleep 函数，接受一个参数 ms，表示要睡眠的时间（单位为毫秒）。sleep 函数返回一个 Promise 对象，在指定的时间后 resolve 这个 Promise。

然后定义了一个 async 函数 run，在该函数内部分别输出”开始睡眠”和”睡眠结束”的信息，并调用了 sleep 函数并传入了3000ms，即3秒的时间。

最后调用 run 函数，即可实现在 JavaScript 中睡眠3秒的效果。

运行结果

开始睡眠
(等待3秒)
睡眠结束

当我们运行上述代码时，会先输出”开始睡眠”，然后等待3秒钟，最后输出”睡眠结束”，表示睡眠3秒的任务执行完毕。

注意事项

使用 async/await：在实现睡眠功能时，推荐使用 async/await 结构，这样代码更加清晰易读。
setTimeout 的单位：在设置 setTimeout 函数的时间时，注意单位是毫秒，计算时需注意与秒的转换。
不要在主线程中执行长时间的任务：虽然可以通过 setTimeout 实现睡眠，但不建议在主线程中执行长时间的任务，会导致页面卡顿，应该考虑使用 Web Worker 或其他方案。

替代方案

除了使用 setTimeout 函数外，还可以通过 Promise 的方式实现睡眠效果。下面是另一种实现方式：

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

async function run() {
  console.log('开始睡眠');
  await new Promise(resolve => setTimeout(resolve, 3000));
  console.log('睡眠结束');
}

run();

这种方法与前文中的实现方式类似，只是直接在 await 后面使用了 setTimeout 函数，利用 Promise 的特性等待定时器执行完毕。