¿Cómo agregar un retraso en un bucle de JavaScript?

JavaScript no ofrece ningún comando de espera para agregar un retraso a los bucles, pero podemos hacerlo usando el método setTimeout . Este método ejecuta una función, después de esperar un número específico de milisegundos. El siguiente ejemplo ilustra cómo agregar un retraso a varios bucles:

• En bucle:

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

  En el código anterior, debe hacer 2000 * i en la línea 8 porque el método setTimeout dentro del ciclo no hace que el ciclo se detenga, sino que en realidad agrega un retraso a cada iteración. Recuerde que toda la iteración comienza su tiempo juntos. Por lo tanto, si solo hacemos 2000 allí, eso hará que todas las iteraciones se ejecuten juntas y solo dará 2000 ms de retraso en la primera iteración y todas las demás iteraciones sucederán instantáneamente después. Entonces, para evitar eso, agregamos 0 a la primera, 2000 a la segunda, 4000 a la tercera y continúa.

  Ejemplo: el programa dado a continuación imprimirá 0 a 9 en la consola después de 2 segundos de retraso en cada número usando el ciclo for .

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

  Producción:
  

• Bucle while: se aplica el mismo concepto para hacer el bucle while dado a continuación.

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

  Ejemplo: el programa dado a continuación imprimirá 0 a 9 en la consola después de 2 segundos de retraso en cada número usando el ciclo while.

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

  Producción:
  

• Bucle do-while: El mismo concepto se aplica para hacer el siguiente bucle do-while.

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

  Ejemplo: El programa dado a continuación imprimirá 0 a 9 en la consola después de 2 segundos de retraso en cada número usando el ciclo do-while.

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

  Producción: