I am building a website whose main component is a slideshow that is in the background of the whole site. Its image and description are on a timer so they change every couple of seconds.

The problem is that when the user leaves the site for a long enough time, the timer is still running, but the content is not present anymore, so when they navigate back to the page, it tries to catch up to the timer and it goes through the slideshow very quickly until it gets to the right state.

My current (very simple) solution for this is that I am cheching if the document is in focus before going to the next slide:

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

The problem with this solution is that if there are multiple windows on the screen and the page is not in focus, then the slideshow won't play, which isn't the intended bahaviour.

My question is: is there any JavaScript event that I can rely on to be called when the document is unloaded but the scripts are still running (if that even is what is happening here), so I can stop the timer and start it again when the user navigates to the site?

Edit: when I said "leaving the site", I meant leaving the tab or switching to another window so the site loses focus.

Link to the site: https://dev.jazzpuntbigband.com

CodePudding user response：

So, I fixed my own issue. Turns out all I had to do was follow this guide from MDN Web Docs.