使用Javascript优化现代浏览器（Chrome）的计时器

Question

I have written a web application which relies heavily on timers running in background tabs. With the more recent Chrome browsers (>Chrome 57), the default option is for "expensive" timers to be throttled if they're in the background - I understand that this feature can be disabled in chrome://flags/ , but I want to avoid asking users to do this. An example of the timer is, which uses JQuery/JS and refreshes every second:

function startTimer(seconds) {
  var timer = seconds - 1;
  var refresh = setInterval(function() { // refresh every second
    var output = displaySeconds(timer); // displaySeconds formats the time
    $("#timer").text(output);
    $("title").html(output + " - Timer");
    if (--timer < 0) {
      clearInterval(refresh); // exit refresh loop
    };
  }, 1000);

Often this timer is disrupted heavily by the browser and lasts about 50% longer than the seconds parameter given as input. I have also minified the JS, but understand that this only really reduces the size of the file so doesn't help.

What would be a sensible and browser agnostic way of optimising this to run smoothly in the background?

Ideas I have: - Find out when tab is in background using some relevant library, reduce the refresh rate to something more coarse (2 or 3 seconds) - seems complicated though!

Thanks in advance

Answer 1

Two suggestions (largely in-line with your own solutions):

• Make the timer dependent on the start-time. In that way, you won't be as dependent on the exact time that the timers fire:

(untested)

function startTimer(seconds) {
    var endTime = new Date().valueOf() + seconds * 1000;
    var refresh = setInterval(function() { // refresh every second
    var now = new Date().valueOf(); // current time in ms
    var output = displaySeconds((endTime - now) / 1000); // displaySeconds formats the time
    $("#timer").text(output);
    $("title").html(output + " - Timer");
    if (now > endTime) {
      clearInterval(refresh); // exit refresh loop
    };
  }, 1000);

• Don't update the GUI if the tab is in the background. Look at the example on: https://developers.google.com/web/updates/2017/03/background_tabs

After applying that code, the GUI-updates could be wrapped in a if (doVisualUpdates)