Tengo un temporizador simple para registrar el tiempo:
let div = document.querySelector('div') let interval = window.setInterval(function(){ div.textContent =parseFloat(div.textContent)+1 },1) <div>0</div> Descubrí que cuando cambio a otra pestaña, setInterval no funciona.
¿Hay alguna solución simple para resolver este problema?
Investigué un poco, la gente sugiere usar window.requestAnimationFrame , pero no funciona tan bien.
¿Hay alguna solución simple o función integrada para resolver esto (solo quiero hacer un temporizador simple)?
¡Gracias por cualquier respuesta!
En estos días, debe esperar que cualquiera de sus JavaScript pueda detenerse o limitarse severamente en cualquier momento. Las razones de esto suelen ser iniciativas de ahorro de energía, pero incluso pueden ser mitigaciones de seguridad (en el caso de los ataques de canal lateral en los últimos años).
Si el temporizador está relacionado con algo que se muestra, requestAnimationFrame() es la solución correcta. Sin embargo, deberá usar el temporizador del sistema para determinar la cantidad de tiempo transcurrido y decidir qué mostrar.
Por lo tanto, si en 1 segundo se textContent que su contenido de texto es igual a 'A', y en 2 segundos se supone que es 'AB' y así sucesivamente, debe suponer que es posible que el temporizador no se ejecute en absoluto a partir de 1 segundo, todo el manera de decir 10 segundos. Entonces, a los 10 segundos, determina que se supone que el contenido del texto es 'ABCDEFGHIJ' y lo muestra... incluso si nunca mostró los valores intermedios.
Quizás un mejor ejemplo es el desarrollo de gráficos/juegos. Si la velocidad de fotogramas de un juego cae de 60 FPS a 10 FPS, el movimiento del juego ahora no es 6 veces más lento. Es solo que se muestran menos marcos. (Por supuesto, esto ignora los primeros juegos que se escribieron para CPU específicas y dependían de su sincronización para controlar la sincronización en el juego).
Podrías usar webworkers, aquí hay una demostración
let div = document.querySelector('div') var blob = new Blob([document.querySelector('#worker').textContent]); var worker = new Worker(window.URL.createObjectURL(blob)); worker.onmessage = function() { div.textContent =parseFloat(div.textContent)+1 } <div>0</div> <script id="worker"> setInterval(function() { postMessage(''); }, 1); </script>