blocks|key|3184725|text|您需要做的是设置一种机制，以较小的时间间隔设置超时，跟踪总的运行时间。您还可以在整个页面(+<body>或其他东西)上跟踪"mouseenter“和"mouseleave”。当短期超时到期时，它们可以检查窗口状态(进入或离开)，并且在窗口不在焦点中时不重新启动进程。"mouseenter“处理程序将启动所有暂停的计时器。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3184726|edit+-+@Šime+Vidas发布了一个很好的例子。|3184727|entityMap^0|1A|6|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

What you'd have to do is set up a mechanism to set timeouts at small intervals, keeping track of total elapsed time. You'd also track "mouseenter" and "mouseleave" on the whole page (the <code>&lt;body&gt;</code> or something). When the short-term timeouts expire, they can check the window state (in or out) and not restart the process when the window is not in focus. The "mouseenter" handler would start all paused timers.

edit &mdash; @Šime Vidas has posted an excellent example.

blocks|key|272598|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|272599|$([window,+document]).blur(function()+{
++//+Clear+timeout+here
}).focus(function()+{
++//+start+timeout+back+up+here
});|code-block|syntax|javascript|272600|Window用于IE，document用于浏览器的其余部分。|272601|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can do something like:

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

Window is for IE, document is for the rest of the browser world.

blocks|key|2971163|text|(function()+{
++var+time+=+10000,
++++++delta+=+100,
++++++tid;

++tid+=+setInterval(function()+{
++++if+(+document.hidden+)+{+return;+}++++
++++time+-=+delta;
++++if+(+time+<=+0+)+{
++++++clearInterval(tid);
++++++myFunction();+//+time+passed+-+do+your+work
++++}++++++++
++},+delta);
})();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2971164|现场演示：+https://jsbin.com/xaxodaw/quiet|unstyled|offset|length|style|BOLD|2971165|2971166|Changelog：|2971167|2971168|2019年6月9日:我已经切换到使用document.hidden来检测页面不可见的时间。|unordered-list-item|CODE|2971169|2971170|entityMap|0|LINK|mutability|MUTABLE|url|https://jsbin.com/xaxodaw/quiet^0|0|0|5|6|V|0|0|0|0|0|I|F|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|12|8|@$G|13|H|14|I|J]]|9|@$G|15|H|16|1|17]]|A|$]]|$1|K|3|-4|5|F|7|18|8|@]|9|@]|A|$]]|$1|L|3|M|5|F|7|19|8|@]|9|@]|A|$]]|$1|N|3|-4|5|F|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1B|8|@$G|1C|H|1D|I|R]]|9|@]|A|$]]|$1|S|3|-4|5|F|7|1E|8|@]|9|@]|A|$]]|$1|T|3|-4|5|F|7|1F|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]]]

<pre><code>(function() {
 var time = 10000,
 delta = 100,
 tid;

 tid = setInterval(function() {
 if ( document.hidden ) { return; } 
 time -= delta;
 if ( time &lt;= 0 ) {
 clearInterval(tid);
 myFunction(); // time passed - do your work
 } 
 }, delta);
})();
</code></pre>

Live demo: <a href="https://jsbin.com/xaxodaw/quiet" rel="noreferrer">https://jsbin.com/xaxodaw/quiet</a>

<hr>

Changelog:

<ul>
<li>June 9, 2019: I’ve switched to using <code>document.hidden</code> to detect when the page is not visible.</li>
</ul>

blocks|key|272621|text|Šime+Vidas的很好的答案，它帮助我编写了自己的代码。为了完整起见，我举了一个例子来说明，如果你想使用setTimeout而不是setInterval：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|272622|(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;};

})();|code-block|syntax|javascript|272623|您将看到窗口模糊检查的时间设置比正常时间更短，因此您可以根据需要在窗口重新获得焦点时运行函数的其余部分的时间来设置此时间。|272624|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Great answer by Šime Vidas, it helped me with my own coding. For completeness sake I made an example for if you want to use setTimeout instead of setInterval:

<pre><code>(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;};

})();
</code></pre>

You'll see that the window blurred check has a shorter time set than normal, so you can set this depending on how soon you require the rest of the function to be run when the window regains focus.

blocks|key|2971262|text|我在我的滑块中使用了几乎与Šime+Vidas相同的方法，但我的代码是基于document.visibilityState进行页面可见性检查的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2971263|document.addEventListener("visibilitychange",+()+=>+{

++if+(+document.visibilityState+===+"visible"+)+{

++++slideshow.play();

++}+else+{

++++slideshow.pause();
++}
});|code-block|syntax|javascript|2971264|关于页面可见性接口：https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API的|2971265|unordered-list-item|2971266|2971267|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API^0|11|O|0|0|A|1W|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|M|3|-4|5|N|7|15|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

I use almost the same approach as Šime Vidas in my slider
but my code is based on <code>document.visibilityState</code> for page visibility checking:
<pre><code>document.addEventListener(&quot;visibilitychange&quot;, () =&gt; {

 if ( document.visibilityState === &quot;visible&quot; ) {

 slideshow.play();

 } else {

 slideshow.pause();
 }
});
</code></pre>
<ul>
<li>About Page Visibility
API: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API</a></li>
</ul>

blocks|key|3184964|text|我最终实现了@Šime+Vidas答案的一个变体，因为如果我打开另一个程序，浏览器窗口不可见，间隔仍在运行，但执行间隔的页面是活动的浏览器选项卡。因此，我将条件修改为document.hidden+%7C%7C+!document.hasFocus()。这样，如果文档被隐藏或文档没有焦点，interval函数就会返回。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3184965|(function()+{
++var+time+=+10000,
++++++delta+=+100,
++++++tid;

++tid+=+setInterval(function()+{
++++if+(+document.hidden+%7C%7C+!document.hasFocus()+)+{+return;+}++++
++++time+-=+delta;
++++if+(+time+<=+0+)+{
++++++clearInterval(tid);
++++++myFunction();+//+time+passed+-+do+your+work
++++}++++++++
++},+delta);
})();|code-block|syntax|javascript|3184966|entityMap^0|2B|13|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

I've finally implemented a variation of @Šime Vidas' answer, because the interval was still running if I opened another program and the browser window was not visible, but the page executing the interval was the active browser tab. So, I've modified the condition to <code>document.hidden || !document.hasFocus()</code>. This way, if the document is hidden or the document doesn't have the focus, the interval function just returns.

<pre><code>(function() {
 var time = 10000,
 delta = 100,
 tid;

 tid = setInterval(function() {
 if ( document.hidden || !document.hasFocus() ) { return; } 
 time -= delta;
 if ( time &lt;= 0 ) {
 clearInterval(tid);
 myFunction(); // time passed - do your work
 } 
 }, delta);
})();
</code></pre>

Is there a way to stop <code>setTimeout("myfunction()",10000);</code> from counting up when the page isn't active. For instance,

<ol>
<li>A user arrives at a "some page" and stays there for 2000ms</li>
<li>User goes to another tab, leaves "some page" open.</li>
<li><code>myfunction()</code> doesn't fire until they've come back for another 8000ms.</li>
</ol>

Run setTimeout only when tab is active

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

当页面不活动时，有没有办法阻止setTimeout("myfunction()",10000);计数。例如,用户到达“某个页面”并在那里停留2000ms用户转到另一个选项卡，离开“某个页面”直到他们返回8000ms才会触发open.myfunction()。

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅当选项卡处于活动状态时运行setTimeoutEN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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