当浏览器选项卡不活动或最小化时计时器停止

Question

我想在浏览器选项卡不活动或最小化时停止计时器，但是问题是当我更改浏览器选项卡或最小化并且最大化浏览器选项卡后，计时器的计数在窗口主体中显示两次。 请提出解决方案

var window_focus;    
$(window).focus(function() {
    window_focus = true;
    startCount();
});
$(window).blur(function() {
    window_focus = false;
    stopCount(); 
});
var c = 0;
var t;
var timer_is_on = 0;

function timedCount()
{
    c = c+1;
    t = setTimeout(function(){timedCount()},1000);    
}

function startCount()
{
    if (!timer_is_on)
    {
        timer_is_on=1;
        timedCount();
    }
}

function stopCount()
{
    clearTimeout(t);
    timer_is_on=0; 
    $('body').append('count' + c + '<br>');        
}

Answer 1

唯一可靠的方法是使用HTML5提供的Visibility API ，它提供了多种检查浏览器可见性状态的方法。

例如：

document.hidden // Returns true if the page is hidden

和

document.visibilityState // Returns a string telling state of visibility

您还可以在浏览器可见性状态更改时添加侦听器，如下所示：

document.addEventListener("visibilitychange", function() {
  console.log(document.hidden, document.visibilityState);
}, false);

但这不适用于所有浏览器，因此您需要先在多个浏览器中进行测试。