Como parte de mi aplicación de reacción, tengo un método setTimeout para ejecutar el temporizador y, si llega a cero, aparecerá un mensaje emergente, que funciona bien siempre que el navegador esté en estado activo, supongamos que cuando cambiamos entre una pestaña del navegador a otro, tuve un problema con la demora en la ejecución de estos intervalos setTimeout, se tarda más en llegar a cero que el configurado o el valor inicial que configuramos.
Digamos que timeoutInterval es 120 segundos como valor predeterminado, luego, si cambiamos otra pestaña, se produjo este problema de latencia de ejecución de setInterval. alguna solución para esto?
A continuación se muestra mi método setInterval para ejecutar el temporizador.
const [inactiveTimer, setInactiveTimer] = useState(120); useEffect(() => { const inactiveInterval = setInterval(() => { if (timeoutInterval > 0) { setInactiveTimer(timeoutInterval - 1); } else if (timeoutInterval === 0) { setShowModal(true); } }, 1000); return () => { clearInterval(inactiveInterval); }; }, []);Cuando una pestaña no está activa, la función se puede llamar a un máximo de una por segundo. Una opción para resolver esto es usar Web Workers, ya que se ejecutan en un proceso separado y, por lo tanto, no se ralentizan.
Otra opción para resolver este problema es piratearla reproduciendo un sonido ~vacío que obligará al navegador a mantener el rendimiento normal.
Más información sobre este problema de desactivación: https://codereview.chromium.org/6577021
Truco de sonido vacío: ¿cómo hacer que JavaScript se ejecute a velocidad normal en Chrome incluso cuando la pestaña no está activa?