页面/浏览器失焦时暂停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

尝试这样的事情:

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 2

立即进入内部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 );
});