How to Pause the timer on window blur and resume the timer on window focus event?

Question

Thanks for seeing my question. I am using wp-pro-quiz plugin for quiz. I want to know that how can I pause the timer if the window is not in focus or is blur and resume it when it is back to focus.? My code: I get reset when it get focused

var timelimit = (function () {
var _counter = config.timelimit;
var _intervalId = 0;
var instance = {};

instance.stop = function () {
    if (_counter) {
        window.clearInterval(_intervalId);
        globalElements.timelimit.hide();
    }
};

instance.start = function () {
    var x;
    var beforeTime;
    if (!_counter)
        return;
    var $timeText = globalElements.timelimit.find('span').text(plugin.methode.parseTime(_counter));
    var $timeDiv = globalElements.timelimit.find('.wpProQuiz_progress');

    globalElements.timelimit.show();
    $.winFocus(function (event) {
        console.log("Blur\t\t", event);
    },
    function (event) {
        console.log("Focus\t\t", event);
        x = _counter * 1000;
        beforeTime = +new Date();
    });

    _intervalId = window.setInterval(function () {

        var diff = (+new Date() - beforeTime);
        var elapsedTime = x - diff;

        if (diff >= 500) {
            $timeText.text(plugin.methode.parseTime(Math.ceil(elapsedTime / 1000)));
        }

        $timeDiv.css('width', (elapsedTime / x * 100) + '%');

        if (elapsedTime <= 0) {
            instance.stop();
            plugin.methode.finishQuiz(true);
        }

    }, 16);
};

return instance;

})();

Answer 1

Use this wrapper function to pause, resume your timeout.

var Timer;

Timer = function(callback, delay) {
  var remaining, start, timerId;
  timerId = void 0;
  start = void 0;
  remaining = delay;
  this.pause = function() {
    window.clearTimeout(timerId);
    remaining -= new Date - start;
  };
  this.resume = function() {
    start = new Date;
    window.clearTimeout(timerId);
    timerId = window.setTimeout(callback, remaining);
  };
  this.resume();
};

Intialize it like this, timer = new Timer("callback_function_here", 45000) In this case total time is 45 seconds for the callback and upon event triggers(blur or focus in your case) it will pause or resume the timer accordingly.

timer.pause() //pause the timer
timer.resume() //resume the timer

PS - Use this function as per the logic of your code. You will have to make the timer calls accordingly in your code

Answer 2

I did it this way:

 var time0 ; var setTimeout_Int; var focused = true; var resume_Fun ; var addTime =0; var addTimeDiff =0; window.onfocus = function() { focused = true; var d = new Date(); addTimeDiff = addTimeDiff +( d.getTime() - addTime ); resume_Fun(); }; window.onblur = function() { focused = false; }; function init() { var d = new Date(); time0 = d.getTime(); setTimeout_Int = setTimeout(update, 1000 ) } function update() { clearTimeout(setTimeout_Int); var d = new Date(); if(focused) { if(d.getTime() -(time0+addTimeDiff) < 20000) { setTimeout_Int= setTimeout(update, 1000 ) } } else { addTime = d.getTime(); resume_Fun = update; } } init();