JavaScript 的 sleep() 函数是什么？

有时我们在任何语言中执行某些任务时，都会通过保持时间延迟来实现。例如，我们正在制作一个每秒更新的计时器应用程序。在这种情况下，我们等待一秒钟，然后一个接一个地更新秒计时器。我们也称这种延迟为 sleep()。在 Java 等其他一些语言中，有一个 sleep() 函数用于等待一段时间。在本文中，我们将了解 JavaScript 中 sleep() 函数的等效方法。让我们遵循延迟生成的语法。

语法（定义函数）

function sleep(t: the time in milliseconds) {
   return new Promise( resolve => setTimeout( resolve, t ));
}
// to apply delay
sleep(t)

语法（单行解决方案）

await new Promise( r => setTimeout( r, t: the time in milliseconds));

语法（另一种单行定义解决方案）

const sleep = ms => new Promise(r => setTimeout(r, t: the time in
milliseconds));

// use delay like:
await sleep( <duration> );

让我们来看一个例子，我们每秒打印一行。您在本文的输出中看不到任何变化。您可以通过在本地系统或任何在线 HTML 编辑器中运行它来查看效果，或者将此代码保存到系统并在浏览器中运行。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style="color : #ff0000">
   </div>
   <script>
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')
      
      // actual javascript code
      try {
         function sleep(time) {
            return new Promise(resolve => setTimeout(resolve, time));
         }
         async function printAndWait() {
            for (let i = 0; i < 10; i++) {
               content += `Printing line after waiting ${i}
               seconds...` + "<br>";
               opDiv.innerHTML = content
               await sleep(i * 1000);
            }
            content += 'Printing is completed' + "<br>";opDiv.innerHTML = content
         }
         printAndWait();
      }
      catch (err) {
         error += err
      }
      finally {
      
         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

在最后一个例子中，我们使用了 `await` 关键字。这个 `await` 关键字只能在 `async` 函数（函数定义前有 `async` 关键字的函数）内部执行，否则，我们可以在越来越多支持的环境中在脚本的顶层使用 `await`。这个 `await` 关键字只会暂停当前的 `async` 函数。这样，它就不会阻塞脚本其余部分的执行。如果我们想要一个阻塞结构，我们可以使用 `Atomics.wait()`，但这依赖于浏览器，大多数浏览器不允许在浏览器的主线程上使用它。

当我们使用 Promise 时，我们可以使用 `.then()` 函数在等待一段时间后执行一些代码。因此，`sleep()` 返回 Promise，然后可以通过 `.then()` 函数执行后续任务。请参阅示例以更好地理解。这里每一行都在两秒钟后打印。打印语句位于异步 `sleep` 方法下的匿名函数中。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style="color : #ff0000">
   </div>
   <script>
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')
      
      // actual javascript code
      try {
         function sleep(time) {
            return new Promise(resolve => setTimeout(resolve, time));
         }
         async function printAndWait() {
            for (let i = 0; i < 10; i++) {
               await sleep(2000).then(() => {
                  content += `Printing line after waiting 2 seconds`
                  + "<br>";
                  opDiv.innerHTML = content
               });
            }
            content += 'Printing is completed' + "<br>";opDiv.innerHTML = content
         }
         printAndWait();
      }
      catch (err) {
         error += err
      }
      finally {
      
         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

让我们使用 sleep() 制作一个 2 分钟的倒计时计时器。

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

示例（HTML）

Open Compiler
<!DOCTYPE html>
<html>
   <title>Online Javascript Editor</title>
<head>
</head>
<body>
   <button onclick = startTimer()> Start Timer </button>
   <button onclick = resetTimer()> Restart Timer </button>
   <h2 id = "timerText" > 2:00 </h2>
   </body>
   <script>
      seconds = 120;
      var timerElem;
      function resetTimer(){
         timerElem = document.getElementById( "timerText" );
         timerElem.innerHTML = "2:00";
         seconds = 120;
      }
      function startTimer(){
         timerElem = document.getElementById( "timerText" );
         countDown();
      }
      function sleep( time ) {
         return new Promise( resolve => setTimeout( resolve, time ));
      }
      function setCurrentTime(){
         var min = Math.floor( seconds / 60);
         var sec = seconds % 60;
         var secStr = String(sec).padStart(2, '0');
         time = `${min}:${secStr}`;
         timerElem.innerHTML = time;
         seconds -= 1;
      }
      async function countDown(){
         while(seconds >= 0){
            await sleep(1000).then(setCurrentTime);
         }
      }
   </script>
</body>
</html>

在这个例子中，我们创建了两个按钮用于启动和重置计时器。它会将计时器重置为 2 分钟。每秒钟它都会将 `seconds` 值减少 1，然后以 m:ss 的格式显示它。这是 JavaScript 中 sleep() 方法的一个例子。

结论

在某些应用程序中需要等待一小段时间。与其他语言一样，JavaScript 也具有时间相关的触发函数，这些函数可以通过 Promise 实现。由于计时器延迟对于系统来说是异步的，我们必须使用 `async` 函数来执行它们。并且在调用 `sleep()` 方法之前使用 `await` 关键字。这些代码只是为了记住在使用延迟或 sleep() 时异步编程技能。

更新于：2022年8月23日

716 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告