clearIntervals() when user has a nap (React in example with Page Visibility API)
Do you still perform unnecessary tasks when the webpage is not visible? The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed. Do you think that all your setIntervals is needed when the user has a nap?
Now you may find in the web heavy, complex applications (platforms, mail agents etc.) which need bring to user fresh data without refreshing the page, notifications, timers. User wants to see and interact with live page, page which will talk to her/him. The simplest way to achieve that is to ask a server about new data with intervals (a better way to use WebSockets).
Let’s imagine that we have a huge complex platform with a lot of users and traffic is huge. We want to make less load on the server. Stop, I do front end, should I care about the server traffic, server loading, have less requests if it is possible? Yes, you have to! To make an unneeded request you not only load the server but load call stack, so page will work slowly. Even Facebook stops playing video when you switch to another tab.
How we can setInterval better?
As we want to improve performance and clear, set interval when we need to more clear, let create a constructor which helps us to solve this problem. This will help us to have one instance of the interval and call
I have an interval where I make HTTP request for getting amount of new users each 5 sec. and render them on UI.
let newUsers_Interval = new Interval(getAmountNewUsers, 5000)
Should we make this requests when the user has a nap?
I change a number of the users each 5 sec. This is the not main part of the application with which user interacts and follow. Can I stop showing new numbers and show the last amount of users when user come back to the page? Yes, I can. Let’s do that.
We need to have another interval or listener which will be checking if the user does not interact with a page.
How to check if user has a nap?
Page Visibility API will help you to achieve that as well.
The API is particularly useful for saving resources by giving developers the opportunity to not perform unnecessary tasks when the webpage is not visible.
So, what we need to do, is to start and stop intervals when page is visible or not.
Find full code example here (page Page_Visibility_API) :
Another solution is listening document click, scroll events and compare dates when user last time interacts with page and when we want to stop making a requests.
First, let’s create another interval which will be checking if user does not interact with a page some time. 15 minutes is fine. As you may see, here we compare two dates as we describer before.
startDate we set when the page is first loaded and reset it on document click event. all code together
For additional help, have a look at this package. No more variable needed for clearInterval() :)
Thank you for reading. Suggestions, comments, thoughts are welcome :)