¿Cómo ralentizar un loop for en javascript?

Question

Necesito ralentizar un ciclo loop y hacer lenta cada iteración.

Por ejemplo, estoy haciendo así:

for (let x = 100; x < 550; x++) {
  setTimeout(() => {
    papel.drawImage(tiranosaurio.imagen, 100, x)
  }, 1000);}

Pero esto lo que está haciendo es que cuando se ejecuta el código, espera un segundo y luego ejecuta todo el loop instantaneamente. Yo lo que quiero es que espere un segundo antes de ejecutar cada iteración del loop.

¿Sugerencias?.

¡Gracias!

¿Responde esto a tu pregunta? [¿Por qué el valor \*i\* siempre es \*5\* - JS?](https://es.stackoverflow.com/questions/320720/por-qu%c3%a9-el-valor-i-siempre-es-5-js) — JackNavaRow, May 06 '20 at 15:45
que tal si lees la respuesta que se encuentra en la pregunta que te envie , te ayudara mucho — JackNavaRow, May 06 '20 at 15:45

score 2 · Answer 1 · answered May 06 '20 at 15:47

Sabiendo que el ciclo va a crear casi inmediatamente todos los intervalos, puedes agregar otra variable para que se vaya incrementando el tiempo de espera en cada iteración:

for (let x = 100, i = 1; x < 550; x++, i++) {
  setTimeout(() => {
    papel.drawImage(tiranosaurio.imagen, 100, x)
  }, i * 1000);
}

score 2 · Accepted Answer · answered May 06 '20 at 16:41

El setTimeout no funciona como esperas.

La instrucción setTimeout se "ejecuta" instantáneamente, independientemente del valor de espera que le introduzcas.

Lo que hace es guardar en la cola de eventos algo como: "Dentro de xxx segundos tengo que ejecutar el método yyy".

Así pues, en tu bucle llamas de manera seguida todos los setTimeout con el valor 1000. Se almacenan todos ellos en la cola de eventos, y dentro de un segundo se ejecutan todos a la vez.

Tienes una serie de alternativas para hacer lo que quieres:

Solución 1: Establecer una espera variable en función del número de paso en el que estés (como en la solución aportada por Triby (esperando i * 1000)
Solución 2: Utilizar recursividad y llamar a la siguiente espera una vez ha terminado la anterior.

Como ejemplo de este segundo caso, podrías tener algo así:

function dibujar_despacio(x) {
  if (x < 10) {
   console.log(x);
   //papel.drawImage(tiranosaurio.imagen, 100, x)

   setTimeout(() => dibujar_despacio(x+1), 1000);
  }
}
dibujar_despacio(0)

Hay algunas diferencias importantes entre ambas soluciones.

La primera diferencia es sobre el tratamiento de errores:

En la primera solución, todos los pasos se ejecutarán incluso si existe algún error en alguno de ellos.

Con la segunda solución, si existe algún problema con papel.drawImage por ejemplo en la iteración 6, entonces las iteraciones 7 y posteriores no se ejecutarán. Se comporta más o menos como un bucle.

La segunda diferencia es que la primera solución podría no respetar el orden si la operación de papel.drawImage es costosa:

Por ejemplo: Pongamos que en el instante 6000ms ejecutas papel.drawImage(tiranosaurio.imagen, 100, 6) y que esta iteración número 6 es especialmente costosa en comparación con las siguientes. Si tarda más de 1 segundo en dibujarse, podría pasar que la siguiente iteración (7) empezase antes de terminar el paso anterior. Y si fuera menos costosa, podría incluso terminar antes que el paso anterior.

Así pues, si quieres garantizar con toda seguridad un orden, porque éste es importante, te recomendaría la segunda solución.

score 0 · Answer 3 · answered May 11 '20 at 16:33

Te propongo que cada renderizado devuelva una Promise como tal y otra función que dado un conjunto de imágenes (o el dato que estés usando), se espere a que todas las imágenes se rendericen.

const set1 = [
  `Set 1 - Img 1`,
  `Set 1 - Img 2`,
  `Set 1 - Img 3`,
  `Set 1 - Img 4`,
  `Set 1 - Img 5`,
];

const set2 = [
  `Set 2 - Img 1`,
  `Set 2 - Img 2`,
  `Set 2 - Img 3`,
  `Set 2 - Img 4`,
  `Set 2 - Img 5`,
  `Set 2 - Img 6`,
];

const canvas = document.querySelector('#canvas');

// Renderiza la imagen en el tiempo que por parámetro.
const renderImage = (img, when) =>
  new Promise((resolve, reject) => {
    try {
      // Renderiza, después espera `when` para resolver la Promise
      setTimeout(() => {
        canvas.innerHTML = img;
        resolve();
      }, when);
    } catch {
      reject(new Error('Error while rendering image ' + img));
    }
  });

// Pinta todos los elementos de set a ciertos fps
// Devuelve una Promise que se resuelve cuando todos los elementos
// de set se han renderizado.
// El parámetro delayed va a servir para declarar
// si la primera imagen debe ser renderizada de inmediato o no.
// Si !delay, se renderiza inmediatamente
const renderSet = (set, fps, delayed = false) => {
  // set.map() va a devolver una Promise para cada img
  // Promise.all() deolverá una Promise que se resuelve
  // cuando todas las promises que pasamos por parámetro se resuelvan.
  const promises = set.map((img, index) =>
    // El cálculo de los FPS es el típico, nada nuevo
    renderImage(img, (delayed  + index) * (1 / fps) * 1000)
  );
  return Promise.all(promises);
}

// Renderizamos una imagen por segundo.
const fps = 1;
// IIFE, para hacer la función async
(async () => {
  await renderSet(set1, fps);
  await renderSet(set2, fps, true);
})();

.container  {
  width: 300px;
  height: 100px;
  
  background: #a8e6d9;
}

#canvas {
  height: inherit;
  width: inherit;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  font-size: 2.5em;
}

<div class="container">
  <p id="canvas"></p>
</div>

La explicación del código se encuentra en el mismo.

He querido postear la solución en tu otro post. Pero veo que fue eliminado.
Lo publico aquí, aprovechando que tiene relación con la pregunta.

Espero que sirva.

¿Cómo ralentizar un loop for en javascript?

3 Answers3

Linked