Question

当页面未处于活动状态时，是否有办法阻止setTimeout("myfunction()",10000);向上计数。例如，

用户到达“某个页面”并在那里停留2000毫秒
用户转到另一个标签页，打开“某个页面”。
myfunction()直到他们再回来8000毫秒才开火。

Answer 1

你走了：

(function() {
    var time = 10000,
        delta = 100,
        tid;

    tid = setInterval(function() {
        if ( window.blurred ) { return; }    
        time -= delta;
        if ( time <= 0 ) {
            clearInterval(tid);
            myFunction(); // time passed - do your work
        }
    }, delta);
})();

window.onblur = function() { window.blurred = true; };
window.onfocus = function() { window.blurred = false; };

现场演示： http://jsfiddle.net/simevidas/J68dJ/3/show/

Answer 2

ŠimeVidas的精彩回答，它帮助我完成了自己的编码。为了完整起见，我举了一个例子，如果你想使用setTimeout而不是setInterval：

(function() {

    function myFunction() {
        if(window.blurred) {
            setTimeout(myFunction, 100);
            return;
        }

        // What you normally want to happen

        setTimeout(myFunction, 10000);
    };
    setTimeout(myFunction, 10000);

    window.onblur = function() {window.blurred = true;};
    window.onfocus = function() {window.blurred = false;};

})();

您会看到窗口模糊检查的设置时间比正常时间短，因此您可以根据窗口重新获得焦点时需要多长时间运行该功能来设置此值。

Answer 3

您可以执行以下操作：

$([window, document]).blur(function(){
        // Clear timeout here
}).focus(function(){
        // start timeout back up here
});

Window适用于IE，文档适用于其他浏览器世界。

Answer 4

我在滑块中使用与ŠimeVidas几乎相同的方法但我的代码基于document.visibilityState进行页面可见性检查：

var interval = 4000;

function slideshow() {
  // slideshow code
};

$(document).ready(function() {

var switchInterval;

function intervalHandler() {
  switchInterval = setInterval(function() {
    if (document.visibilityState === "visible") {
      slideshow();
    } else {
      return;
    }
  }, interval);
}

intervalHandler();

});

演示：https://brofox86.github.io/nerds/
关于页面可见性 API：https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

仅当选项卡处于活动状态时才运行setTimeout

5 个答案: