只有在製表符處於活動狀態時才運行setTimeout

有沒有辦法在頁面處於非活動狀態時停止setTimeout("myfunction()",10000);的計數。例如，只有在製表符處於活動狀態時才運行setTimeout

用戶到達一個「一些網頁」，並在那裏停留2000毫秒
用戶到另一個標籤，留下「一些頁面」開放。
myfunction()直到他們再次回來8000毫秒纔會開火。

2011-04-23 Kyle

在這裏你去：

(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/

來源

2011-04-23 19:34:09

除非我遺漏了一些東西，否則在任何用戶交互（如點擊頁面）之前，在初始頁面加載時不會運行setInterval函數，因爲'onfocus'事件在初始頁面加載時不會觸發。 – 2013-05-17 06:07:28

@torazaburo最初，'window.blurred'將會是'undefined'，就像它是'false'一樣。因此，定時器自動開始倒計時。請注意'setInterval'如何立即執行 - 它不會等待焦點或模糊發生。 – 2013-05-17 13:33:15

您可以使用document.hidden：https：//developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API#document.hidden_Read_only – SleepWalker 2017-03-13 11:57:27

你需要做的是建立一個機制，以小間隔設置超時，跟蹤總的經過時間。您還可以在整個頁面上追蹤「mouseenter」和「mouseleave」（<body>或其他）。當短期超時到期時，他們可以檢查窗口狀態（進入或退出），並且在窗口沒有對焦時不重新啓動進程。「mouseenter」處理程序將啓動所有暫停的定時器。

編輯 — @ŠimeVidas發佈了一個很好的例子。

來源

2011-04-23 19:23:19 Pointy

你可以這樣做：

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

窗口是IE，文件是瀏覽器世界其他地區。

來源

2011-04-23 19:27:39 PetersenDidIt

謝謝你的回覆。我用另一個，因爲它滿足了所有的要求。但關於這一點，我用'$（window）'作爲所有瀏覽器的對象獲得了更多的成功。 – Kyle 2011-04-26 20:57:04

偉大的答案，它幫助我用我自己的編碼。爲了完整起見，我做了一個例子，如果你想使用的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;}; 

})();

你會看到窗口模糊檢查具有更短的時間設置爲比正常的，所以你可以在這個取決於如何設置很快你需要在窗口重新獲得焦點時運行其餘的功能。

來源

2011-10-03 07:56:03 Jasuten

我用幾乎相同的方法，因爲森達維達斯在我的滑塊但我的代碼是基於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

來源

2017-11-19 20:29:51 BroFox

只有在製表符處於活動狀態時才運行setTimeout

回答

相關問題