React + Typescript: setTimeout en el bucle for no está poblado el array consecutivamente, o en absoluto.
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;
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ónpush
para el arreglocarsLeft
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
usandosetTimeout
, necesitas establecer un tiempo de retraso diferente para cada iteración del bucle, para que cada llamada a la funciónpush
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: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ónsetCarsLeft
después de la llamada a la funciónpush
para actualizar el estado del arreglocarsLeft
y provocar un nuevo renderizado del componente con el nuevo arreglo.¡Espero que esto te ayude a resolver el problema!