在前端开发中，我们经常需要实现一些需要暂停一段时间才能执行下一步操作的场景。比如，在一些游戏或动画场景中，我们需要等待几秒钟然后再执行下一个动画效果。而 JavaScript 中没有提供原生的“sleep”函数供我们使用。那么，该怎么实现 JavaScript 中的休眠/等待功能呢？
使用 setTimeout 函数
setTimeout 是 JavaScript 中用于设置定时器的函数。我们可以使用它来模拟休眠/等待的功能。
-------- --------- - ------ --- --------------- -- ------------------- ----- -
上述代码定义了一个名为“sleep”的函数，它返回一个 Promise 对象。当我们调用 sleep 函数并传入一个时间参数时，它会创建一个定时器并在指定的时间之后将 Promise 对象的状态改为“已完成”。这样，我们就可以在 Promise 的 then 方法中执行接下来的操作。
下面是一个示例代码：
--------------------- ------------------- -- - ------------------- ---
上述代码中，我们先输出“start”，然后调用 sleep 函数并传入 1000ms（1 秒）作为参数。由于 sleep 返回的是一个 Promise 对象，所以我们可以在它的 then 方法中执行下一步操作。在这个示例中，我们只是简单地输出了“end”。
使用 async/await
除了使用 Promise 和 setTimeout，我们还可以利用 JavaScript 中的 async/await 来实现休眠/等待功能。async/await 是 ES2017 中引入的一种异步编程方法，它让我们可以像同步代码一样编写异步代码。
下面是一个示例代码：
----- -------- --------- - ----- --- --------------- -- ------------------- ----- - --------------------- ------ ---------- - ----- ------------ ------------------- -----
上述代码中，我们定义了一个异步函数 sleep，并在其中使用了 await 关键字来等待一个 Promise 对象。然后，在主函数中，我们先输出“start”，然后调用 sleep 函数并等待 1 秒钟。在等待完成之后，我们再输出“end”。
使用 async/await 的好处是可以避免回调地狱的问题，代码易读且易维护。但需要注意的是，只有在支持 ES2017 的环境中才能使用该方法。
结论
以上两种方法都可以实现 JavaScript 中的休眠/等待功能，具体使用哪种方法取决于个人习惯和项目需求。无论是哪种方法，我们都要注意避免阻塞主线程，避免影响用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9309