es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • React + Typescript: setTimeout en el bucle for no está poblado el array consecutivamente, o en absoluto.

React + Typescript: setTimeout en el bucle for no está poblado el array consecutivamente, o en absoluto.

29 Jul, 2023 Programación

Estoy construyendo una función que hace que las imágenes de coches aleatorios se animen en la pantalla, y quiero escalonar la población del array “carsLeft” con un setTimeout..(en última instancia, voy a aleatorizar el tiempo de retraso).

Todo funciona hasta que intento usar un setTimeout. Con el código siguiente, no se muestran los coches. Un Console.log muestra que el array “carsLeft” no se pobló. Cuando quito el setTimeout, se muestran todos los coches (por supuesto, a la vez). Ya he probado IIDE sin suerte. He estado atascado en este problema desde hace tiempo, ¡por favor ayuda!

function Traffic() {
  let carsLeft: any = [];
  const generateCarLeft = () => {
    for (let i = 0; i < 5; i++) {
      setTimeout(() => {
        carsLeft.push(
          <carleft key="{i}" classname="car__left">
            <img src="{carListDay[Math.floor(Math.random()" *="" carlistday.length)]}="" alt="">
          </carleft>
        );
      }, 3000);
    }
  };

  generateCarLeft();
  return <div classname="traffic__container">{carsLeft}</div>;
}

export default Traffic;
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema en el código anterior es que la función setTimeout se está utilizando dentro de un bucle, y todos los timeouts se están estableciendo con el mismo tiempo de retraso de 3000ms. Esto significa que todas las llamadas a la función push para el arreglo carsLeft se ejecutarán después de 3000ms al mismo tiempo, por lo que el retraso no tiene ningún efecto en la población escalonada del arreglo.

    Para escalonar la población del arreglo carsLeft usando setTimeout, necesitas establecer un tiempo de retraso diferente para cada iteración del bucle, para que cada llamada a la función push se ejecute después de un tiempo de retraso diferente. Una manera de hacer esto es multiplicar el tiempo de retraso por el índice de la iteración, de esta manera:

    for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    carsLeft.push(
      <carleft key="{i}" classname="car__left">
        <img src="{carListDay[Math.floor(Math.random()" *="" carlistday.length)]}="" alt="">
      </carleft>
    );
    setCarsLeft([...carsLeft]); // Actualiza el estado para volver a renderizar el componente con el nuevo arreglo
  }, (i + 1) * 1000); // Multiplica el tiempo de retraso por el índice de la iteración para establecer un tiempo de retraso diferente para cada iteración
}

    Aquí, he cambiado el tiempo de retraso para multiplicar el índice de la iteración por 1000ms para que la primera llamada a la función push se ejecute después de 1000ms, la segunda después de 2000ms, y así sucesivamente. También he agregado una función setCarsLeft después de la llamada a la función push para actualizar el estado del arreglo carsLeft y provocar un nuevo renderizado del componente con el nuevo arreglo.

    ¡Espero que esto te ayude a resolver el problema!

Comments are closed.