Tengo un poco de código que se repite y se interrumpe durante unos segundos especificado en una función setTimeout , luego el código se repite una vez que finaliza el retraso. El problema al que me enfrento es que cuando la página pierde el foco durante un tiempo, el tiempo de espera se desincroniza y el código se repite en intervalos "aleatorios" distintos de los especificados en el retraso de setTimeout .
Aquí está el código actual para referencia:
$(document).ready(function () { for (var key in keys) { element = key; val = keys[key]; test(element, val); (function loop(element, val) { setTimeout(function () { test(element, val); loop(element, val); }, 5000); })(element, val); } });He buscado un poco y el problema parece ser el esperado y estoy tratando de encontrar la solución ideal, hasta ahora he optado por el enfoque más simple que consiste en recargar toda la página cuando pierde y luego recupera el enfoque. Funciona, pero no estoy muy contento con él.
Aquí está la solución actual:
$(window).blur(function(){ $(window).focus(function(){ location.reload(); }); }); También leí sobre el uso de clearTimeout con focus en un intento de reiniciar o sincronizar el tiempo de espera, pero durante muchos intentos no pude hacer que algo funcionara correctamente. En el mejor de los casos, de alguna forma u otra, desequilibraría el tiempo de espera.
No sé qué dirección tomar para obtener un enfoque más adecuado que actualizar la página web.
Gracias de antemano por cualquier sugerencia.
Encontré una respuesta adecuada en otra pregunta que funciona bien para mi caso de uso.
La sugerencia es bastante simple: evite ejecutar código que dependa de funciones cronometradas o limitadas cuando la pestaña/página no esté enfocada o, más exactamente, cuando esté oculta para el usuario:
if (!document.hidden){ //your animation code here }fuente: https://stackoverflow.com/a/53944438/924855
Aunque mi problema no está relacionado con la animación, hay algo en común que sufre la limitación de setTimeout cuando la página no está a la vista. Con este enfoque, evito ejecutar el código por completo cuando la página no está visible y evita la desincronización por completo, así:
$(document).ready(function () { for (var key in keys) { element = key; val = keys[key]; test(element, val); (function loop(element, val) { setTimeout(function () { if (!document.hidden) { test(element, val); } loop(element, val); }, 5000); })(element, val); } });No creo que esta sea la mejor solución.
Pero usted podría establecer la fecha límite. Usando setInterval para verificar cada segundo si se ha alcanzado la fecha límite.
const finish = Date.now() + 10e3; function test(timeout) { console.log('Start: ', new Date().toGMTString()); let timer = setInterval(() => { if (Date.now() >= timeout) { console.log('Finished: ', new Date(timeout).toGMTString()); clearInterval(timer); } }, 1000); } test(finish);