当页面/浏览器失去焦点时暂停 setInterval

Question

我在客户的主页上制作了一个简单的幻灯片，使用 setInterval 来计时轮换。

为了防止浏览器在页面未处于焦点时（正在查看另一个选项卡或另一个程序）搞砸 setInterval，我使用：

function onBlur() {
            clearInterval(play);
        };

        function onFocus() {

            mySlideRotateFunction();

        };

        if (/*@cc_on!@*/false) { 
            document.onfocusin = onFocus;
            document.onfocusout = onBlur;
        } else {
            window.onfocus = onFocus;
            window.onblur = onBlur;
        }

其中 mySlideRotateFunction 设置 setInterval 并运行一些 jQuery。虽然这在大多数情况下都有效，但我发现有时 onBlur 似乎没有运行，当我返回页面时，计时已经“建立”并且旋转变得疯狂。

我无法完全确定为什么这种情况偶尔会发生，而在其他情况下却不会发生。

我的问题 - 我的代码有问题吗？当浏览器窗口失去焦点时，是否有人对“暂停”setInterval有更好的建议？

谢谢

Answer 1

立即在 setInterval 内检查文档是否获得焦点。该间隔将像往常一样继续触发，但其中的代码仅在文档获得焦点时才会执行。如果窗口模糊并随后重新聚焦，则间隔将继续保持时间，但在此期间 document.hasFocus() 为 false，因此浏览器无需当焦点恢复时，通过多次执行代码块来“赶上”。

var timePerInterval = 7000;
$(document).ready(function() {
    setInterval(function(){
        if ( document.hasFocus() ) {
            // code to be run every 7 seconds, but only when tab is focused
        }
    }, timePerInterval );
});

Answer 2

尝试这样的事情：

var myInterval;
var interval_delay = 500;
var is_interval_running = false; //Optional

$(document).ready(function () {
    $(window).focus(function () {
        clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet
        if  (!is_interval_running) //Optional
            myInterval = setInterval(interval_function, interval_delay);
    }).blur(function () {
        clearInterval(myInterval); // Clearing interval on window blur
        is_interval_running = false; //Optional
    });
});

interval_function = function () {
     is_interval_running = true; //Optional
     // Code running while window is in focus
}

在 IE9 和 FF6 中完成的一些测试

Answer 3

有一个使用 Web Workers 的 setInterval 实现，它可以防止浏览器主线程暂停间隔的常见行为。

很酷的是你只需要导入你想要的包并且语法保持不变。他们负责使用网络工作人员触发间隔的底层逻辑。

Github 页面

Npm 包