Tengo la siguiente matriz. [{startColor:"red",event:"start",time:0.3},{stopColor:"blue",event:"stop",time:10},{startColor:"green",event:"start",time:40}] . Estoy recorriendo la matriz y para cada período de tiempo de espera establecido, quiero congelar el código para ese período dado en la sección de tiempo de cada elemento de la matriz usando el tiempo de espera establecido y mostrar el color correspondiente para la cantidad de segundos en el elemento de la matriz. . ejemplo . para cada elemento de la matriz settimeout(function, time_from_the_element) . El desafío al que me enfrento es hacer el bucle, pero después de que el primer elemento haya sido enlazado, settimeout no se reinicia de nuevo para el segundo elemento. Es decir, supongamos que el primer elemento tomó 14 segundos y el siguiente elemento tomará 16 segundos y, por lo tanto, después de los primeros 14 segundos, solo toma dos segundos hasta que se llame al siguiente elemento, aunque quiero que después de los primeros 14 segundos, settimeout se reinicia en 0 y cuenta hasta 16 otra vez y tal y tal. Me ha llevado un día entero intentar resolverlo. El otro desafío al que me enfrento es que, después del último bucle de la matriz, quiero borrar el color del último elemento de la pantalla. Eso es después de que el último elemento haya sido enlazado y parece complicado.
NB: setClockBackgrouco y setbackgroucol son funciones que estoy usando para mostrar los colores y pueden ser reemplazadas por console.log en este escenario.
const changeColors = async () => { const dat2 = await new Promise((resolve) => { for (let i = 0; i < data.length; i++) { console.log("data i is:", data[i]); if (data[i].event === "start") { setTimeout(() => { console.log("Start: ", data[i].event); setClockBackgroucol(null); setbackgroucol(data[i].startColor); }, data[i].programtime * 1000); } else if (data[i].event === "stop") { setTimeout(() => { console.log("Stop: ", data[i].event); setClockBackgroucol(data[i].stopColor); setbackgroucol(null); console.log( "time taken is ", data[i].time. * 1000 ); }, data[i].time * 1000); } console.log("should have been called last"); } }); };Prueba de esta manera
async function changeColors() { const array = [ { startColor: "red", event: "start", time: 3000 }, { stopColor: "blue", event: "stop", time: 1000 }, { startColor: "green", event: "start", time: 4000 }, ]; for (const object of array) { switch (object.event) { case "start": { console.log(object.startColor); await delay(object.time); // in milliseconds break; } case "stop": { console.log(object.stopColor); await delay(object.time); // in milliseconds break; } default: continue; } } } function delay(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } changeColors()Esto es solo un fragmento (basado en la respuesta de @Pawan Bishnoi) para demostrar que el switch se puede reemplazar fácilmente con una expresión simple y que una llamada final de "reinicio" eliminaría el último color establecido. De lo contrario, creo que Pawan creó una excelente respuesta que merecía ser elegida como la "correcta".
async function changeColors() { const array = [ { startColor: "red", event: "start", time: 300 }, { stopColor: "blue", event: "stop", time: 10000 }, { startColor: "green", event: "start", time: 4000 }, ]; for (const o of array) { console.log(o[o.event+"Color"]); await delay(o.time); // in milliseconds } console.log("no color"); } function delay(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } changeColors()