如何在窗口模糊时暂停计时器并在窗口焦点事件上恢复计时器？

Question

感谢您看到我的问题。 我正在使用 wp-pro-quiz 插件进行测验。 我想知道如果窗口未聚焦或模糊，如何暂停计时器并在重新聚焦时恢复它。？ 我的代码：当它聚焦时我会重置

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

使用此包装器功能可以暂停，恢复超时。

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();
};

像这样初始化它， timer = new Timer("callback_function_here", 45000)在这种情况下，回调的总时间为45秒，并且在事件触发时（您的情况是模糊或集中），它将相应地暂停或恢复计时器。

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

PS-根据代码的逻辑使用此功能。 您将必须在代码中进行相应的计时器调用

Answer 2

我是这样做的：

 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();