JavaScript sleep/wait函数

例如PHP和C等编程语言具有sleep(sec)函数，以暂停执行固定时间。Java具有thread.sleep()函数，Python具有time.sleep()函数，Go具有time.sleep(2*time.second)函数。

与其他语言不同，JavaScript没有任何sleep()函数。我们可以使用一些方法来模拟JavaScript中的sleep()函数。JavaScript中的promise和async/await函数等特性帮助我们更容易地使用sleep()函数。

await用于等待一个promise，并且只能在async函数中使用。JavaScript的行为是异步的，因此有一个处理此类异步行为的promise的概念。由于这种异步行为，它将继续工作并在执行期间不会等待任何东西。异步/await函数帮助我们以同步的方式编写代码。

如何在JavaScript中使用sleep函数

在实现JavaScript中的sleep函数之前，重要的是理解JavaScript代码的执行。

JavaScript中sleep()的语法

sleep(delayTime in milliseconds).then(() => {
// code to be executed
})

sleep()函数可以与async/await一起使用，以获取执行之间的暂停。其用法如下：

语法

const func = async () => { await sleep(delayTime in milliseconds)
//code to be executed
}
fun()

上述的语法是在JavaScript中实现睡眠功能的方式。现在，我们来看一下在JavaScript中使用sleep()函数的示例。

示例1

在这个示例中，我们使用了 sleep() 函数和 async/await 功能。定义了一个名为 fun() 的函数，并带有一些语句。一开始，屏幕上会显示出 “Hello World” 的文本。然后，由于sleep函数， fun() 函数会暂停2秒钟。在给定的时间段完成后，屏幕上会显示 “Welcome to the javaTpoint.com” 的文本，并在循环结束之前重复显示。在每次循环的迭代中，文本将在屏幕上重复10次，并且每次迭代都会暂停两秒钟。

<html>
<head>
</head>
<body>
<h1> Example of using sleep() in JavaScript </h1>
<script>
   function sleep(milliseconds) {
      return new Promise(resolve => setTimeout(resolve, milliseconds));
   }
   async function fun() {
      document.write('Hello World');
      for (let i = 1; i <=10 ; i++) {        
         await sleep(2000);
         document.write( i + " " + "Welcome to the javaTpoint.com" + " " + "</br>");
      }
   }
   fun();
</script>

</body>
</html>

输出

在执行上述代码后，输出结果将为 –

JavaScript sleep/wait函数

两秒钟后，输出将会改变 –

JavaScript sleep/wait函数

循环将在每次迭代中暂停2秒钟，共迭代10次。

示例2

在这里，我们使用 setTimeout() 函数创建一个promise。setTimeout()函数在指定的时间后执行代码。我们还使用then()方法，在promise完成后执行所需的函数。

最初，一些语句将显示在屏幕上。然后，在延迟2秒钟后，屏幕上将显示文本 “End” 。

这种方法可以延迟一个函数的执行。由于使用了promise，它在ES6中得到支持。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Example of using the sleep() in JavaScript</h1>
<p>
There is a sleep of 2000 milliseconds
</p>
<script>
let sleep = ms => {
return new Promise(resolve => setTimeout(resolve, ms));
};

document.write("Begin" + "<br>");
document.write("Welcome to the javaTpoint.com" + "<br>");

sleep(2000).then(() => {
document.write("End");
});
</script>
</body>

</html>

输出

在执行上述代码之后，输出将会是 –

JavaScript sleep/wait函数