JavaScript 等待

引言

在 JavaScript 中，并没有专门用于等待代码执行完成的 sleep() 方法。举个例子，假设您希望将三条消息，间隔一秒钟，记录到 JavaScript 控制台。您尝试使用 setTimeout() 作为次优选择，因为它会设置一个计时器来执行提供的代码，而 JavaScript 缺乏 sleep() 函数。

不幸的是，setTimeout() 并未实现预期的功能。您可能已经在 JavaScript 循环中尝试过，并发现 setTimeout() 完全失效。

setTimeout() 方法根据其自身的一套标准运行，这就是为什么它有时会被误认为是 sleep() 函数。

如何在 JavaScript 中编写 sleep 函数？

在 JavaScript 中编写 sleep 函数的最简单方法是结合使用 Promise、Await 和 Async 方法以及 setTimeout ()。Await 函数类似于 sleep 函数，它们使代码等待直到 Promise 对象被实现。要模拟 sleep 函数，您还可以为 setTimeout() 提供以递增和递减步长运行的例程。

什么是 JavaScript 中的 setTimeout()？

window 对象的异步 setTimeout() 函数用于设置一个将在计时器上执行的动作。该计时器设置该精确动作将被触发的精确时间点。

setTimeout() 也可以写成 window.setTimeout()，因为它是 window 对象的一个组件。尽管如此，window 前缀通常被省略并且不给出，因为它被推断出来了。

setTimeout() 方法的语法

setTimeout() 方法的一般语法如下

让我们分解一下

• 创建计时事件的一种方法是使用 setTimeout() 函数。
• 它接受两个必需的参数。
• 第一个必需的参数是 function_name。您希望运行的代码包含在回调函数的名称中。函数定义（其中包含实际的代码块）通过函数名被引用和指向。
• 作为参考点，一秒等于 1000 毫秒。时间是第二个必需元素。它代表程序在执行函数之前必须经历的指定等待时间（以秒为单位）。

总的来说，这意味着 setTimeout() 将只执行给定函数中的代码一次，而且是在预定时间长度之后。

这里需要注意的是，您可以向 setTimeout() 提供一个匿名函数来代替函数名。

当函数中有几行代码时，这很方便。

使用匿名函数意味着，与之前看到的引用函数名不同，代码直接作为第一个参数包含在 setTimeout() 中。

需要注意的另一件事是，setTimeout() 创建的计时器由其 timeoutID 标识，这是一个由函数返回的正数。

如何在 JavaScript 中等待 N 秒？

让我们通过以下示例演示 setTimeout() 的使用

输出

JavaScript wait Example
Javatpoint

• JavaScript 代码以自上而下的方式执行。
• 按下运行时，第一行代码立即执行。
• 第二行代码指出，在执行 website() 函数中的代码之前，必须有 3000 毫秒或 3 秒的编程延迟。
• 您可以看到，一旦 3000 毫秒过去，函数中的代码就会正确运行。

让我们看另一个例子

输出

Good Morning!
Good Afternoon!
Good Night!

• 上面示例中的第一行代码 console.log("Good Morning!"); 立即运行。
• 尽管是文件中的最后一行代码，但 console.log("Good Afternoon!"); 执行相同的事情。
• setTimeout() 的代码表示它必须等待一秒钟才能执行。
• 但是，在此期间，文件中的其余代码继续执行。
• 相反，console.log("Good Afternoon!"); 被运行，并且该行被暂时跳过。
• 当一秒钟过去后，setTimeout() 中的代码开始执行。
• 此外，您可以向 setTimeout() 提供可选参数。

greeting 函数接受两个参数，phrase 和 name，如下例所示。

输出

Welcome all, my name is MS Abhimanyu

之后，这些参数被发送到 setTimeout() 函数，这将导致 5 秒的延迟

如何在 JavaScript 中使用 clearTimeout() 方法？

clearTimeout() 函数允许您停止 setTimeout() 中代码的执行。这时前面提到的 timeoutID 就派上用场了。

以下是 clearTimeout() 的标准语法

timeoutID（每次调用 setTimeout() 都会返回）必须保存到一个变量中才能使其工作。

然后，如下所示，timeoutID 作为参数传递给 clearTimeout()

输出

Good Morning!

setTimeout() 函数将不再在此点运行。

setTimeout 和 setInterval 有什么区别？

setTimeout() 和 setInterval() 的语法非常相似。

setInterval() 语法如下所示

然而，它们功能不同这一事实使得将它们互换使用是不明智的。

setInterval() 重复启动一个活动，而 setTimeout() 只启动一个。

下面的示例中，每五秒调用一次 'js' 函数

输出

JavaScript wait Example
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint
Javatpoint

如果您想定期重复某个操作，setInterval() 是一个不错的选择。

如何在 JavaScript 中编写 sleep 函数？

您可以使用 promise、async (async) 和 await (await) 函数创建一个按预期执行的 sleep() 方法。

await 关键字必须与此自定义 sleep() 方法一起使用，该方法只能在 async 函数内部使用。

这是一个编写带有代码的 sleep() 方法的示例

输出

First
Second
Third

因为 await 导致代码的同步执行暂停直到 Promise 被解决，所以 JavaScript sleep() 方法的运行方式与您预期的完全一致。

JavaScript Sleep 函数可以在循环中工作吗？

循环可以有效地使用上述方法之一来停止 JavaScript 执行。让我们看两个简短的实例。

这是一个使用自定义 sleep() 函数的代码示例

输出

Hello #1
Hello #2
Hello #3
Hello #4
Hello #5

这是一个更简单地使用超时的代码示例

输出

Hello #1
Hello #2
Hello #3
Hello #4
Hello #5

创建 JavaScript Sleep 函数的最佳方法

内置的 setTimeout() 方法可以轻松地在 JavaScript 中实现 sleep() 或 wait() 函数；但是，在使用它时要小心。

setTimeout() 函数本身不作为 sleep() 方法运行，但您可以使用 async 和 await 来构建自定义的 JavaScript sleep() 函数。

或者，您可以通过将错开（递增）的超时传递给 setTimeout() 来模拟 sleep() 方法。这是可能的，因为，像 JavaScript 的惯例一样，所有对 setTimeout() 的调用都同步运行。

希望这能让您使用纯 JavaScript 而无需其他框架或工具，为您的代码添加一点延迟。

结论

在 JavaScript 中，实现等待机制对于有效管理异步操作至关重要。然而，有一些传统方法，例如 'setTimeout' 和 'setInterval'，它们既不精确，性能也不是最好的。要使用的最佳技术将取决于您的要求。当您希望在特定时间后执行某些操作时，使用 setTimeout() 方法。当您希望定期执行某些操作时，setInterval() 方法很有用。

当您希望在作业完成后运行一些代码，但您需要知道它需要多长时间时，Promise 很有用。通过允许您等待任务完成而不会完全停止程序，Promise 具有优势。Promise 语法以及 'async' 和 await 表达式的添加有助于编写更简洁、更可读的代码，而无需管理异步操作的复杂性。针对多个并发操作实现 'Promise.all()' 以及现有的 'async.js' 库，使其在等待处理方面更有效率。最后，学习 JavaScript 中的异步操作使开发人员能够编写响应迅速、高效且大规模的 Web 应用程序。