[英]How to Pause the timer on window blur and resume the timer on window focus event?
Thanks for seeing my question.感谢您看到我的问题。 I am using wp-pro-quiz plugin for quiz.我正在使用 wp-pro-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;
})();
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 = new Timer("callback_function_here", 45000)
在这种情况下,回调的总时间为45秒,并且在事件触发时(您的情况是模糊或集中),它将相应地暂停或恢复计时器。
timer.pause() //pause the timer
timer.resume() //resume the timer
PS - Use this function as per the logic of your code. PS-根据代码的逻辑使用此功能。 You will have to make the timer calls accordingly in your code 您将必须在代码中进行相应的计时器调用
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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.