JavaScript 如何在循环中添加延迟

在JavaScript中，循环用于重复操作或迭代一段数据。通过使用不同的技术，我们可以在循环的每次迭代之间添加延迟，以调节执行速度或产生特定的时间效果。本文将教您如何在JavaScript循环中添加延迟，并如何使用它来延迟运行在其中的特定代码。

让我们来看一些示例以更好地理解这个概念：

示例1-使用setTimeout()

在下面的示例中：

创建一个包含以下元素的数组-1、2、3、4和5
处理数组，每次迭代之间暂停1秒
使用setTimeout()函数，processItem()函数通过数组进行迭代，每次迭代延迟1秒

文件名-index.html

<html>
<head>
   <title>How to add delay in a loop in JavaScript?</title>
   <script>
      function delayedLoop() {
         var items = [1, 2, 3, 4, 5];
         var delay = 1000; // 1 second

         function processItem(index) {
            // Perform some task with the current item
            console.log("Processing item:", items[index]);

            // Check if there are more items to process
            if (index < items.length - 1) {
               // Set a timeout to process the next item after the delay
               setTimeout(function () {
                  processItem(index + 1);
               }, delay);
            }
         }

         // Start the loop with the first item
         processItem(0);
      }

      delayedLoop();
   </script>
</head>
<body>
   <h3>Add Delay in Loop using setTimeout()</h3>
</body>
</html>

输出

结果将如下图所示。

JavaScript 如何在循环中添加延迟

示例2 – 使用async/await

在这个示例中，我们将 –

创建一个名为sleep()的函数，它返回一个在预定时间后解决的promise。
在delayedLoop()函数内，我们将遍历item数组。使用await sleep(delay)语句来在每次迭代之间引入1秒的延迟。

文件名 – index.html

<html>
<head>
   <title>How to add delay in a loop in JavaScript?</title>
   <script>
      function sleep(ms) {
         return new Promise(resolve => setTimeout(resolve, ms));
      }

      async function delayedLoop() {
         var items = [1, 2, 3, 4, 5];
         var delay = 1000; // 1 second

         for (var i = 0; i < items.length; i++) {
            // Perform some task with the current item
            console.log("Processing item:", items[i]);

            // Wait for the specified delay before processing the next item
            await sleep(delay);
         }
      }

      delayedLoop();
   </script>
</head>
<body>
   <h3>Add Delay in Loop using async/await</h3>
</body>
</html>