setInterval() is not working properly for inactive tab

Question

i am developing one timer which is taking record of time. for that i am using setInterval method of java script now problem is that it's not working properly if tab is inactive.

one solution i got to store old time and subtract from new time with that one problem if after starting the timer if user change system time then it affect on to the my timer. please inform me if there is any other possible way or solution.

timerInterval = setInterval(function() {
    seconds=seconds+1;
    if(seconds==60)
    {
        minutes=minutes+1;
        if(minutes==60)
        {
            minutes=0;
            hours=hours+1;
        }                                               
        $("#task"+aData['taskId']).html(("0" + hours).slice(-2)+":"+("0" + minutes).slice(-2));
        seconds=0;
    }
},1000);

The user changing his system time should be a rare occasion, however timezones might change from daylight savings time or travel. I'd recommend you use a UTC date object to track the offset. — Manuel Schweigert, Nov 19 '14 at 11:04
See http://stackoverflow.com/questions/6032429/chrome-timeouts-interval-suspended-in-background-tabs — Kraylog, Nov 19 '14 at 11:05
There is no way to be sure of time other than polling your own server, which would mean an ajax request. Often. The problem you are encountering is the `window.blur()` problem - when the window is not focused, most browsers will try to save resources by not executing javascript at this time. But it might pile up and then execute javascript quickly. Now, it's not a bad idea to just poll the users computer for time unless time is really the _only_ thing people would want to cheat on, as people **don't actually change their computers time**. You could just use the users time as a reference... — somethinghere, Nov 19 '14 at 11:05

score 0 · Answer 1 · answered Nov 19 '14 at 11:04

0

Try setTimeout instead of setInterval

setInterval do not prioritize the calling function depending on the browser load. i have gone through same problem and i resolved it using setTimeout

answered Nov 19 '14 at 11:04

1

with timeout same problem and yes i have one feature for that i must have to stop infinite loop of setTimeout many time and start new so it's not possible. – Uday A. Navapara Nov 19 '14 at 11:05

score 0 · Answer 2 · answered Nov 19 '14 at 11:17

0

I made a plunker, and I edited my time, but the timer just keeps going.

$(document).ready(function(){
  var seconds = 0;
  var hours = 0;
  var minutes = 0;

  setInterval(function(){
    seconds++;
    if(seconds == 60)
    {
        seconds=0;
        minutes++;
        if(minutes == 60)
        {
            minutes=0;
            hours++;
        }    
    }
    $(".timer").html(("0" + hours).slice(-2)+":"+("0" + minutes).slice(-2)+":"+("0" + seconds).slice(-2));
  },1000);
});

and in the html a tag to show the timer:

<h2 class="timer"></h2>

http://plnkr.co/edit/yWQWrGxnkgOFvXDoLNhU?p=preview

Let me know if this helps you out!

answered Nov 19 '14 at 11:17

Jason van der Zeeuw

923
1
11
29

you are right it's working if system time is change but after starting the timer change your browser for other work and make this browser in active after 10 mins you will got difference in time and use chrome browser for this testing if possible – Uday A. Navapara Nov 19 '14 at 11:21
I don't understand your comment, I switched to an other browser with other tabs and then clicked back after approximately 40 seconds. My timer was 40 seconds further as it was supposed to. – Jason van der Zeeuw Nov 19 '14 at 11:23
not after 40 seconds come back after 7 to 8 minutes – Uday A. Navapara Nov 19 '14 at 11:30
have your face this problem now? – Uday A. Navapara Nov 19 '14 at 11:51
I tried it, but it still works here.. Google Chrome (46 minutes) while doing stuff in a different browser. – Jason van der Zeeuw Nov 19 '14 at 13:21

setInterval() is not working properly for inactive tab

2 Answers2