首页 > web前端 > js教程 > 如何在执行下一行代码之前在 JavaScript 中创建 5 秒的延迟？

如何在执行下一行代码之前在 JavaScript 中创建 5 秒的延迟？

Patricia Arquette

发布： 2024-10-25 17:07:03

原创

488 人浏览过

如何在执行下一行之前等待 5 秒>

在 JavaScript 中工作时，控制执行流程至关重要。考虑以下场景：您需要一个函数在执行特定操作之前暂停 5 秒，例如检查变量的值。

使用 setTimeout 函数

传统上，JavaScript 开发人员依赖 setTimeout 函数来引入执行延迟。该函数有两个参数：一个表示要执行的代码的字符串和一个以毫秒表示的延迟。在您的特定情况下，下面的代码摘录不足：

<br>function stateChange(newState) {<br> setTimeout('', 5000);</p>
<p> if (newState == -1) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">alert('VIDEO HAS STOPPED');

登录后复制

登录后复制

}
}

这里的问题是传递给 setTimeout 的空字符串不会没有任何作用。要在检查 newState 变量之前创建 5 秒的延迟，您应该按如下方式修改代码：

<br>function stateChange(newState) {<br> setTimeout(() = > {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">if (newState == -1) {
  alert('VIDEO HAS STOPPED');
}

登录后复制

}, 5000);
}

通过提供函数作为第一个参数，您可以指定代码延迟后执行。现在，该函数将在检查 newState 之前准确地暂停 5 秒。

替代解决方案

在现代 JavaScript 中，您还可以利用 async/等待达到相同的结果。 Async/await 简化了异步操作并使代码更具可读性。以下是如何针对您的场景实现它：

<br>const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));</p>
<p>异步函数 stateChange(newState) {<br>等待延迟(5000);</p>
<p>if (newState == -1 ) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">alert('VIDEO HAS STOPPED');