在前端开发中，我们经常需要在一段时间之后执行某些 JavaScript 代码。这可能是为了向用户显示一个弹出窗口、启动一个定时器或者在页面加载完成后才进行某些操作等等。本文将介绍几种实现方式，并给出相应的示例代码。
使用 setTimeout()
setTimeout() 函数可以使 JavaScript 代码在指定的毫秒数之后执行。例如，下面的代码会在一秒钟后向用户显示一个消息框：
--------------------- - ------------ --------- -- ------
第一个参数是要执行的 JavaScript 代码，第二个参数是要等待的毫秒数。需要注意的是，setTimeout() 可能比预期的执行时间晚一些，因为它只保证在指定的时间后开始执行代码，而不保证在指定的时间内执行完毕。
此外，如果您希望取消计时器，可以使用 clearTimeout() 函数。例如，以下代码会在用户单击按钮时取消上面的计时器：
--- ------- - --------------------- - ------------ --------- -- ------ -- ------ ----------------------
使用 setInterval()
setInterval() 函数与 setTimeout() 相似，但它会每隔指定的毫秒数重复执行一次指定的 JavaScript 代码。例如，以下代码会每隔一秒钟输出一次 "Hello world!"：
---------------------- - ------------------ --------- -- ------
同样，您可以使用 clearInterval() 函数来取消计时器。例如，以下代码会在用户单击按钮时停止上面的计时器：
--- ------- - ---------------------- - ------------------ --------- -- ------ -- ------ -----------------------
使用 Promise 和 async/await
如果您使用的是 ECMAScript 6 或更高版本的 JavaScript，您可以使用 Promise 和 async/await 来实现异步操作。以下是一个示例，它将等待一秒钟后打印消息：
-------- --------- - ------ --- --------------- -- ------------------- ----- - ----- -------- ------------- - ----- ------------ ------------------ --------- - --------------
在这个示例中，我们定义了一个名为 delay() 的函数，它返回一个 Promise 对象，并使用 setTimeout() 来解决该 Promise 对象。接着，我们定义了一个 showMessage() 函数，它使用 async/await 关键字来等待 delay() 函数的返回值。最后，我们调用 showMessage() 函数来输出消息。
结论
无论您是通过 setTimeout()、setInterval() 还是 Promise 和 async/await 来实现延迟执行 JavaScript 代码，都需要记住要仔细检查代码，以确保不会出现意外结果或错误。此外，如果您使用的是 setTimeout() 或 setInterval()，请注意可能会出现延迟或不可预测的结果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30579