如何在JavaScript循环中添加延迟？

JavaScript没有提供任何等待命令来增加循环延迟, 但是我们可以使用setTimeout方法。等待指定的毫秒数后, 此方法将执行一个函数。下面给出的示例说明了如何向各种循环添加延迟：

 

for循环：

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

在上面给出的代码中, 你必须执行2000 *我在第8行, 因为setTimeout循环内的方法不会使循环暂停, 但实际上会增加每次迭代的延迟。请记住, 所有迭代都一起开始。因此, 如果我们只做2000在那里, 这将使所有迭代一起执行, 并且在第一次迭代中只会产生2000 ms的延迟, 而所有其他迭代将在此之后立即发生。因此, 为了避免这种情况, 我们先将0加到2000, 将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 () {
       // Add tasks to do
   }, 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循环。

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>

输出如下： 

更多JavaScript开发相关内容请参考：lsbin - IT开发技术：https://www.lsbin.com/

参考更多JavaScript内容：

• JS短路运算符：https://www.lsbin.com/1906.html
• JS Gallery插件：https://www.lsbin.com/1327.html
• jQuery刷新页面：https://www.lsbin.com/2951.html