0

Estoy haciendo un script en Tampermonkey que hace un array a partir de elementos del DOM (que puede ser variable), y luego interactuar con ellos en serie mediante un for(...) loop.

El problema es que quiero que salte un mensaje cuando llega al final del loop, pero no sucede. El código que tengo hasta ahora interactúa con los elementos del array, pero no hace nada luego de interactuar con el último

const arrayDemo = ['ele', 'other', 'etc', 'who', 'cares']

for (let i = 1; i <= arrayDemo.length; i++) {
    setTimeout (() => {
        console.log("Interacción con " + i + "/" + arrayDemo.length)
    }, 1000 * i);
    if (i === arrayDemo.lenght) { console.log("Y esto debe salir al final de todo") }
}

En el sitio en inglés dicen que si se pone el código de esta forma debe funcionar como yo espero, pero ese no es el caso

const arrayDemo = ['ele', 'other', 'etc', 'who', 'cares']

for (let i = 1; i <= arrayDemo.length; i++) {
    setTimeout (() => {
        console.log("Interacción con " + i + "/" + arrayDemo.length);
    }, 1000 * i);
}
console.log("Y esto debe salir al final de todo");

¿Cómo debería escribir el código para que haga algo más tras haber llegado al final del array?

2
  • Por qué insistes en intentar usar un timeout?? Es un juego de adivinación en ese punto... no sabes cuánto lleva el código, y no necesariamente será siempre lo mismo... Si quieres que algo se ejecute tras acabar el loop simplemente... escríbelo a continuación del loop?? El código JS se ejecuta de arriba a abajo (si ignoramos llamadas a métodos), con lo cual for (blablabla){} console.log('Se acabó el loop'); ejecutará el log tras salir del loop...
    – Benito-B
    Commented el 25 oct. a las 13:58
  • @Benito-B Es para evitar errores con la página en la que se aplica, a veces no toma inputs correctamente si se interactúa con ella demasiado rápido (pasa también con interacciones humanas). Esperando 1 segundo entre cada interacción con la página se evita ese problema. Como dije en la pregunta, en el segundo cuadro de texto, el console.log aparece antes de que termine el for loop (editado porque me expresé incorrectamente) Commented el 25 oct. a las 14:02

2 respuestas 2

2

El problema es que estas usando setTimeout el cual es una función asíncrona por lo que ésta empieza a ejecutarse pero el loop no se detiene, este sigue ejecutandose e iniciando el resto de setTimeout y de hecho el loop termina y después terminan los setTimeout y para mala suerte estos no tienen la función wait para esperarlos por lo que habría que crearles esta función wait. Te muestro un ejemplo de como podría hacerse entre comillas "elegante"

const arrayDemo = ['ele', 'other', 'etc', 'who', 'cares'];

function WaitTimeout(ms, message) {
    return new Promise(resolve => setTimeout(() => resolve(message), ms));
}

const arrayForPromises = [];
for (let i = 0; i < arrayDemo.length; i++) {
    arrayForPromises.push(WaitTimeout(1000, "Interacción con " + i + "/" + arrayDemo.length))
}

Promise.all(arrayForPromises)
.then((messages) => {
    messages.forEach((message) => {
        console.log(message);
    });
    console.log('All timers finished!');
});

1
  • No tuve tiempo de responderte antes, pero quería agradecerte por tu respuesta, me funcionó muy bien! Commented el 8 nov. a las 14:08
1

Estuve rompiéndome la cabeza con esto toda la mañana y la respuesta se me ocurrió poco después de haberla preguntado

El problema es que el console.log del final se ejecuta después del for(...), pero el setTimeout dentro del loop hace que parezca que se ejecuten al revés. Para solucionarlo, creé la variable timeOutExternal dentro del loop, que crea un timeout 1 segundo más largo que el timeout del último elemento del array, usando como referencia el valor de i. El código arreglado sería así:

const arrayDemo = ['ele', 'other', 'etc', 'who', 'cares']

for (let i = 1; i <= arrayDemo.length; i++) {
    setTimeout (() => {
        console.log("Interacción con " + i + "/" + arrayDemo.length)
    }, 1000 * i);
  var timeOutExternal = (1000 * i) + 1000;
}
setTimeout(() => {console.log("Y esto debe salir al final de todo")}, timeOutExternal);

Debe haber soluciones más elegantes o funcionales, pero esta sirve para lo que necesito

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.