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

但这并不适用于所有浏览器，因此您需要在开始之前在多个浏览器中对此进行测试。

浏览器选项卡处于非活动状态或最小化时停止

1 个答案: