Tengo una matriz de objetos que contienen una duration de campo que especifica la duración en que el Object debe permanecer visible.
Cada Object de la matriz tiene su propia duration .
Así que quiero que cada objeto aparezca después de otro con la ayuda de setTimout .
Algo como esto: (onClick)
const playScenes = () => { const cpScenes = [...scenes]; for(let i; i < cpScenes.length;i++){ const timer = setTimeout(() => { showScene(cpScenes[i]); //Show the current scene }, cpScenes[i].duration); //Time changes automatically } clearTimeout(timer); }; La forma en que estoy pensando en esto es que setTimeout debería bloquear la ejecución de for loop y luego ejecutarse después del tiempo especificado y luego el ciclo continúa.
Ni setTimeout ni setInterval bloquean la ejecución. En cambio, lo que puedes hacer es envolverlo en una promesa como:
async function playscenes() { const cpScenes = [...scenes]; for(let i; i < cpScenes.length;i++){ await (new Promise( (resolve) => const timer = setTimeout(() => { showScene(cpScenes[i]); clearTimeout(timer); resolve(); }, cpScenes[i].duration); }) } Básicamente, lo que esto hace es que, para cada bucle, el programa esperará a que se resuelva la new Promise , lo que sucede cuando se agota el tiempo. Si no entiende el código asíncrono (async/await) y promete funcionar, le recomiendo que investigue primero. Aunque este código no debería ejecutarse dentro de un componente React, ya que asumo que cambia el estado cada vez que se activa setTimeout. Lo que podrías hacer es:
imports ... async function playscenes(showScene){...} let scenesPlaying = false; export function YourComponent(...){ ... if(!scenesPlaying) { playscenes(showScene); scenesPlaying = true; } ... }Realmente no veo cómo se relaciona con react , de todos modos, puede usar recursion en lugar de for-loop para que funcione
function playScenes(scenes) { if (scenes.length === 0) { return; } const [scene, ...rest] = scenes; setTimeout(() => { showScene(scene); playScenes(rest); }, scene.duration); }Aquí hay una solución simple basada en bucle for :
function newComputerMessage() { let total = 0; for (let i = 0; i < cpScenes.length; i++) { total += cpScenes[i].duration; setTimeout(() => showScene(cpScenes[i]), total); } }En caso de que desee ver el funcionamiento, aquí hay un fragmento de código de ejemplo de trabajo con valores ficticios:
let cpScenes = [5000, 5000, 3000, 4000] function test() { let total = 0; for (let i = 0; i < cpScenes.length; i++) { total += cpScenes[i]; setTimeout(() => showScene('test'), total); } } function showScene(num) { console.log(num); } test()