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

【问题标题】：How to Pause the timer on window blur and resume the timer on window focus event?如何在窗口模糊时暂停计时器并在窗口焦点事件上恢复计时器？
【发布时间】：2016-02-25 08:26:49
【问题描述】：

感谢您看到我的问题。我正在使用 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;

})();

【问题讨论】：

这和php有什么关系？

标签： javascript php jquery wordpress

【解决方案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

P.S - 根据您的代码逻辑使用此功能。您必须在代码中相应地调用计时器

【讨论】：

【解决方案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();

【讨论】：