JavaScript 如何在循环中添加延迟

JavaScript没有提供任何等待命令来给循环添加延迟，但我们可以使用 setTimeout 方法来实现。该方法在等待指定的毫秒数后执行一个函数。以下示例说明如何给不同的循环添加延迟：

• 循环示例：

for (let i=0; i<10; i++) { 
   task(i); 
} 

function task(i) { 
  setTimeout(function() { 
      // 添加要执行的任务
  }, 2000 * i); 
} 

在上面给出的代码中，你必须在第8行做 2000 * i ，因为循环内的 setTimeout 方法不会使循环暂停，而是为每次迭代添加延迟。请记住，所有迭代同时开始计时。因此，如果我们只在那里做 2000 ，那么所有迭代都会一起执行，第一次迭代只会有2000毫秒的延迟，其他迭代将立即执行。因此，为了避免这种情况，我们对第一次迭代添加0，第二次迭代添加2000，第三次迭代添加4000，依此类推。

示例： 给定的程序会在每个数字后延迟2秒在控制台中打印0到9，使用for循环。

<script> 
for (let i=0; i<10; i++) { 
   task(i); 
} 
  
function task(i) { 
  setTimeout(function() { 
      console.log(i); 
  }, 2000 * i); 
} 
</script> 

输出：

• While循环： 相同的概念被应用于以下给定的while循环。

let i = 0; 
while (i < 10) { 
  task(i); 
   i++; 
} 
function task(i) { 
  setTimeout(function() { 
      // 添加要执行的任务
  }, 2000 * i); 
} 

示例： 给定的程序会使用while循环，在每个数字后延迟2秒在控制台中打印0到9。

<script> 
let i = 0; 
while (i < 10) { 
  task(i); 
   i++; 
} 
function task(i) { 
  setTimeout(function() { 
      console.log(i); 
  }, 2000 * i); 
} 
</script> 

输出:

• Do-while循环:同样的概念也适用于下面给出的Do-while循环。

let i = 0; 
do { 
  task(i); 
  i++; 
} while (i < 5); 
function task(i) { 
  setTimeout(function() { 
    // Add tasks to do 
  }, 2000 * i); 
} 

示例:下面的程序将使用do-while循环在2秒后打印每个数字0到9。

<script> 
let i = 0; 
do { 
  task(i); 
  i++; 
} while (i < 5); 
function task(i) { 
  setTimeout(function() { 
    console.log(i); 
  }, 2000 * i); 
} 
</script> 

输出: