Estoy creando un sitio web cuyo componente principal es una presentación de diapositivas que se encuentra en el fondo de todo el sitio. Su imagen y descripción están en un temporizador, por lo que cambian cada dos segundos.

El problema es que cuando el usuario abandona el sitio durante un tiempo suficiente, el temporizador sigue funcionando, pero el contenido ya no está presente, por lo que cuando navega de regreso a la página, intenta ponerse al día con el temporizador y funciona. a través de la presentación de diapositivas muy rápidamente hasta que llegue al estado correcto.

Mi solución actual (muy simple) para esto es que estoy comprobando si el documento está enfocado antes de pasar a la siguiente diapositiva:

 //- show next slide function nextSlide() { if (!document.hasFocus()) return ...

El problema con esta solución es que si hay varias ventanas en la pantalla y la página no está enfocada, la presentación de diapositivas no se reproducirá, lo cual no es el comportamiento previsto.

Mi pregunta es: ¿hay algún evento de JavaScript en el que pueda confiar para que se llame cuando se descargue el documento pero los scripts aún se están ejecutando (si eso es lo que está sucediendo aquí), para que pueda detener el temporizador y volver a iniciarlo cuando el usuario navega al sitio?

Editar : cuando dije "abandonar el sitio", quise decir dejar la pestaña o cambiar a otra ventana para que el sitio pierda el foco.

Enlace al sitio: https://dev.jazzpuntbigband.com