Stop setTimeout loop when page inactive, restart when page active

Question

I am using a setTimeout loop pulling data from database every 5 seconds. Here is part of my javascript:

(function setDailystats() {
        $.ajax({
            type: "GET",
            contentType: 'application/json',
            url: '@Url.Action("GetDailyStats", "myControllerName")',
            async: true,
            success: function (data) {
                $("#todayAppts").text(data.appts);
                $("#todayAlerts").text(data.alerts);
                console.log("Update daily stats");
                setTimeout(setDailystats, 5000);
            }
        });
}());

The problem is the loop continue running even when I am away from the page. I want to stop the loop when page inactive, restart the loop when page active.

I have tried to use ifvisible.js:

var isPageActive = true;
ifvisible.setIdleDuration(10); 

ifvisible.on("idle", function () {
    isPageActive = false;
});
ifvisible.on("wakeup", function () {
    isPageActive = true;
});
(function setDailystats() {
     if (isPageActive) {
        $.ajax({
            type: "GET",
            contentType: 'application/json',
            url: '@Url.Action("GetDailyStats", "myControllerName")',
            async: true,
            success: function (data) {
                $("#todayAppts").text(data.appts);
                $("#todayAlerts").text(data.alerts);
                console.log("Update daily stats");
            }
        });
    };
    console.log("Check page activity");
    setTimeout(setDailystats, 5000);
}());

It works fine. I am just wondering if there is any other better way to do it. There is still stuff (ifvisible.js, check every 5 seconds ...) running in the background all the time.

score 1 · Answer 1 · answered Jul 27 '18 at 17:18

1

You could avoid using a 3rd party lib and use something among these lines here

You have few options with the widnow.focus/window.blur as well as document.hidden. It might end up being cleaner and less dependent on another lib. Hope this helps.

answered Jul 27 '18 at 17:18

Akrion

18,117
1
34
54

Yes, it really helped. I knew it should not need 3rd party lib for such a simple task. Thanks a lot. – Tracy Zhou Jul 27 '18 at 17:27
Awesome. Glad it helped. – Akrion Jul 27 '18 at 17:27

score 1 · Accepted Answer · answered Jul 27 '18 at 17:18

1

Is this what you need?

$(window).blur(function() {
  isPageActive = false;
});

$(window).focus(function() {
  isPageActive = true;
});

answered Jul 27 '18 at 17:18

Chaska

3,165
1
11
17

Exactly what I am looking for. Thanks a lot! – Tracy Zhou Jul 27 '18 at 17:28

Stop setTimeout loop when page inactive, restart when page active

2 Answers2