仅当选项卡处于活动状态时才运行setTimeout
有没有办法停止setTimeout("myfunction()",10000); 从页面未激活时开始计数。 例如，
- 用户到达“某个页面”并在那里停留2000ms
- 用户转到另一个选项卡，打开“某个页面”。
-
myfunction()在他们再回来8000ms之前不会开火。
干得好：
(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/
Š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;}; })();
您将看到窗口模糊检查的时间设置比正常时间短，因此您可以根据窗口重新获得焦点时需要多长时间运行该function来设置此项。
你可以这样做：
$([window, document]).blur(function(){ // Clear timeout here }).focus(function(){ // start timeout back up here });
Window适用于IE，文档适用于浏览器世界的其余部分。
您需要做的是设置一种机制，以便以较小的间隔设置超时，跟踪总的经过时间。 您还可以在整个页面上跟踪“mouseenter”和“mouseleave”（ 或其他内容）。 当短期超时到期时，他们可以检查窗口状态（进入或退出），而不是在窗口未对焦时重新启动进程。 “mouseenter”处理程序将启动所有暂停的计时器。
编辑 – @ŠimeVidas发布了一个很好的例子。
我在我的滑块中使用与Š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/
- 关于Page Visibility API： https ： //developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API