0

So I developed this website for monitoring the status of multiple experiments around the world. The website is supposed to update every few seconds, so I made that every 3 seconds using JavaScript.

The page works fine, but if I leave it for some time or switch the tab, the timer just stops! In the source, you'll see that the only actions that stops the timer are:

1- If the user clicked on the timer itself

2- If the user chose specific data to view

Why is it stopping alone? How can I force it to run forever? I'm suspecting this is a browser thing. I'm using Google Chrome 46.0.2490.80 and Firefox 42.0.

If you require any additional information, please ask.

The Quantum Physicist
  • 24,987
  • 19
  • 103
  • 189
  • When a tab is inactive, only at a maximum of once per second the function is called. Also, how are you sure the timer stopped instead of the form submit stopped? – juvian Nov 11 '15 at 16:37
  • @juvian Thank you for the information. How can this be resolved? – The Quantum Physicist Nov 11 '15 at 16:42
  • @You could try setting a lower interval like 500 and do the submit every 2 instances of the call to the function. But be sure that the timer is really stopping – juvian Nov 11 '15 at 16:48

2 Answers2

1

Interesting case.

Note that you do not have to switch tab for your timer to stop, just wait a little bit and it will eventually stop by itself.

Your #submitDateForm HTML is not properly formed (missing </center> end tag), so the </form> end tag seems to be ignored.

Therefore this form is merged with the following one (#refreshForm). When the latter is submitted, it also submits the "parent" form (#submitDateForm), so both AJAX / POST requests are sent. It is then a race condition as to which one will resolve last and override the value of your doCount global variable, which is the switch for your timer.

Eventually the #submitDateForm request will take a little bit longer than the other one, set doCount to 0 and that is it! Your timer stops.

Demo: http://jsfiddle.net/c86kfu1a/

By the way, you have several other syntax errors in your HTML (e.g. </cetner> at 2 places) and 2 files are not found (default.css and highlight.pack.js ).

I advise you to use the Developers tools for debugging, it is incredibly handy. Hit F12 in Chrome and Firefox to open the panel.

ghybs
  • 47,565
  • 6
  • 74
  • 99
0

Timers on modern web browsers won't work as you are expecting.

Because the tab is on the background, Chrome and other browsers will cap functions and timeouts/intervals to at most one per second.

Possible solution (though not the best architecture for your case) is using Web Workers. Take a look at this plugin https://github.com/turuslan/HackTimer

Duplicated question: Chrome: timeouts/interval suspended in background tabs?

Community
  • 1
  • 1
caulitomaz
  • 2,141
  • 14
  • 20