blocks|key|905947|text|只需执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|905948|var+$div+=+$('div');
var+a+=+0;

setInterval(function()+{
++++a%2B%2B;
++++$div.stop(true,true).css("left",+a);
},+1000+/+30);|code-block|syntax|javascript|905949|非活动浏览器选项卡缓冲了一些setInterval或setTimeout函数。|offset|length|style|CODE|905950|stop(true,true)将停止所有缓冲的事件，并仅立即执行最后一个动画。|905951|window.setTimeout()方法现在限制为在非活动选项卡中每秒发送不超过一个超时。此外，它现在将嵌套超时钳位到HTML5规范允许的最小值:4ms(而不是以前钳位到的10ms)。|905952|entityMap^0|0|0|E|B|Q|A|0|0|F|0|0|J|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@$I|10|J|11|K|L]]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@$I|13|J|14|K|L]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|R|$]]

Just do this:

<pre><code>var $div = $('div');
var a = 0;

setInterval(function() {
 a++;
 $div.stop(true,true).css("left", a);
}, 1000 / 30);
</code></pre>

Inactive browser tabs buffer some of the <code>setInterval</code> or <code>setTimeout</code> functions.

<code>stop(true,true)</code> will stop all buffered events and execute immediatly only the last animation.

The <code>window.setTimeout()</code> method now clamps to send no more than one timeout per second in inactive tabs. In addition, it now clamps nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms it used to clamp to).

blocks|key|906016|text|我认为对这个问题最好的理解是在这个例子中：http://jsfiddle.net/TAHDb/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|906017|我在这里做一件简单的事情：|906018|间隔1秒，每次隐藏第一个跨度并将其移动到最后，并显示第二个跨度。|906019|如果你停留在页面上，它会按照它的预期工作。但是如果你把标签藏了几秒钟，当你回来的时候，你会看到一个奇怪的东西。|906020|这就像所有在你不活跃的时候没有发生的事件都会在一次时间内发生。因此，在几秒钟内，您将获得类似于X个事件。它们速度如此之快，以至于可以一次看到所有6个跨度。|906021|所以它看起来chrome只是延迟了事件，所以当你回来的时候，所有的事件都会发生，但都是同时发生的…|906022|一个实际的应用程序就是这个简单的幻灯片演示。想象一下这些数字是图像，如果用户在返回时将tab隐藏起来，他将看到所有的图像浮动，完全网格化。|906023|要解决这个问题，请使用stop(true，true)，就像pimvdb告诉的那样。THis将清除事件队列。|906024|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/TAHDb/^0|L|Q|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|16|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|17|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|18|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|19|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]]]

I think that a best understanding about this problem is in this example: <a href="http://jsfiddle.net/TAHDb/">http://jsfiddle.net/TAHDb/</a>

I am doing a simple thing here: 

Have a interval of 1 sec and each time hide the first span and move it to last, and show the 2nd span.

If you stay on page it works as it is supposed. 
But if you hide the tab for some seconds, when you get back you will see a weired thing.

Its like all events that didn't ucur during the time you were inactive now will ocur all in 1 time. so for some few seconds you will get like X events. they are so quick that its possible to see all 6 spans at once.

So it seams chrome only delays the events, so when you get back all events will occur but all at once...

A pratical application were this ocur iss for a simple slideshow. Imagine the numbers being Images, and if user stay with tab hidden when he came back he will see all imgs floating, Totally mesed.

To fix this use the stop(true,true) like pimvdb told.
THis will clear the event queue.

blocks|key|906074|text|我在音频淡出和HTML5播放器上遇到了同样的问题。当选项卡不活动时，它被卡住了。所以我发现WebWorker可以无限制地使用间隔/超时。我使用它将"ticks“发送到主javascript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|906075|WebWorkers代码：|906076|var+fading+=+false;
var+interval;
self.addEventListener('message',+function(e){
++++switch+(e.data)+{
++++++++case+'start':
++++++++++++if+(!fading){
++++++++++++++++fading+=+true;
++++++++++++++++interval+=+setInterval(function(){
++++++++++++++++++++self.postMessage('tick');
++++++++++++++++},+50);
++++++++++++}
++++++++++++break;
++++++++case+'stop':
++++++++++++clearInterval(interval);
++++++++++++fading+=+false;
++++++++++++break;
++++};
},+false);|code-block|syntax|javascript|906077|主要Javascript：|906078|var+player+=+new+Audio();
player.fader+=+new+Worker('js/fader.js');
player.faderPosition+=+0.0;
player.faderTargetVolume+=+1.0;
player.faderCallback+=+function(){};
player.fadeTo+=+function(volume,+func){
++++console.log('fadeTo+called');
++++if+(func)+this.faderCallback+=+func;
++++this.faderTargetVolume+=+volume;
++++this.fader.postMessage('start');
}
player.fader.addEventListener('message',+function(e){
++++console.log('fader+tick');
++++if+(player.faderTargetVolume+>+player.volume){
++++++++player.faderPosition+-=+0.02;
++++}+else+{
++++++++player.faderPosition+%2B=+0.02;
++++}
++++var+newVolume+=+Math.pow(player.faderPosition+-+1,+2);
++++if+(newVolume+>+0.999){
++++++++player.volume+=+newVolume+=+1.0;
++++++++player.fader.postMessage('stop');
++++++++player.faderCallback();
++++}+else+if+(newVolume+<+0.001)+{
++++++++player.volume+=+newVolume+=+0.0;
++++++++player.fader.postMessage('stop');
++++++++player.faderCallback();
++++}+else+{
++++++++player.volume+=+newVolume;
++++}
});|906079|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I ran into the same problem with audio fading and HTML5 player. It got stuck when tab became inactive.
So I found out a WebWorker is allowed to use intervals/timeouts without limitation. I use it to post &quot;ticks&quot; to the main javascript.
WebWorkers Code:
<pre><code>var fading = false;
var interval;
self.addEventListener('message', function(e){
 switch (e.data) {
 case 'start':
 if (!fading){
 fading = true;
 interval = setInterval(function(){
 self.postMessage('tick');
 }, 50);
 }
 break;
 case 'stop':
 clearInterval(interval);
 fading = false;
 break;
 };
}, false);
</code></pre>
Main Javascript:
<pre><code>var player = new Audio();
player.fader = new Worker('js/fader.js');
player.faderPosition = 0.0;
player.faderTargetVolume = 1.0;
player.faderCallback = function(){};
player.fadeTo = function(volume, func){
 console.log('fadeTo called');
 if (func) this.faderCallback = func;
 this.faderTargetVolume = volume;
 this.fader.postMessage('start');
}
player.fader.addEventListener('message', function(e){
 console.log('fader tick');
 if (player.faderTargetVolume &gt; player.volume){
 player.faderPosition -= 0.02;
 } else {
 player.faderPosition += 0.02;
 }
 var newVolume = Math.pow(player.faderPosition - 1, 2);
 if (newVolume &gt; 0.999){
 player.volume = newVolume = 1.0;
 player.fader.postMessage('stop');
 player.faderCallback();
 } else if (newVolume &lt; 0.001) {
 player.volume = newVolume = 0.0;
 player.fader.postMessage('stop');
 player.faderCallback();
 } else {
 player.volume = newVolume;
 }
});
</code></pre>

blocks|key|906133|text|有一种使用Web+Workers的解决方案(如前所述)，因为它们在单独的进程中运行，并且不会减慢速度|type|unstyled|depth|inlineStyleRanges|entityRanges|data|906134|我已经写了一个很小的脚本，不需要修改你的代码就可以使用--它简单的覆盖了setTimeout，clearTimeout，setInterval，clearInterval函数。|906135|只需将其包含在所有代码之前即可。|906136|more+info+here|offset|length|906137|entityMap|0|LINK|mutability|MUTABLE|url|http://github.com/turuslan/HackTimer^0|0|0|0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@$H|V|I|W|1|X]]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

There is a solution to use Web Workers (as mentioned before), because they run in separate process and are not slowed down

I've written a tiny script that can be used without changes to your code - it simply overrides functions setTimeout, clearTimeout, setInterval, clearInterval.

Just include it before all your code.

<a href="http://github.com/turuslan/HackTimer" rel="noreferrer">more info here</a>

blocks|key|689936|text|以下是我的粗略解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|689937|(function(){
var+index+=+1;
var+intervals+=+{},
++++timeouts+=+{};

function+postMessageHandler(e)+{
++++window.postMessage('',+"*");

++++var+now+=+new+Date().getTime();

++++sysFunc._each.call(timeouts,+function(ind,+obj)+{
++++++++var+targetTime+=+obj[1];

++++++++if+(now+>=+targetTime)+{
++++++++++++obj[0]();
++++++++++++delete+timeouts[ind];
++++++++}
++++});
++++sysFunc._each.call(intervals,+function(ind,+obj)+{
++++++++var+startTime+=+obj[1];
++++++++var+func+=+obj[0];
++++++++var+ms+=+obj[2];

++++++++if+(now+>=+startTime+%2B+ms)+{
++++++++++++func();
++++++++++++obj[1]+=+new+Date().getTime();
++++++++}
++++});
}
window.addEventListener("message",+postMessageHandler,+true);
window.postMessage('',+"*");

function+_setTimeout(func,+ms)+{
++++timeouts[index]+=+[func,+new+Date().getTime()+%2B+ms];
++++return+index%2B%2B;
}

function+_setInterval(func,+ms)+{
++++intervals[index]+=+[func,+new+Date().getTime(),+ms];
++++return+index%2B%2B;
}

function+_clearInterval(ind)+{
++++if+(intervals[ind])+{
++++++++delete+intervals[ind]
++++}
}
function+_clearTimeout(ind)+{
++++if+(timeouts[ind])+{
++++++++delete+timeouts[ind]
++++}
}

var+intervalIndex+=+_setInterval(function()+{
++++console.log('every+100ms');
},+100);
_setTimeout(function()+{
++++console.log('run+after+200ms');
},+200);
_setTimeout(function()+{
++++console.log('closing+the+one+that\'s+100ms');
++++_clearInterval(intervalIndex)
},+2000);

window._setTimeout+=+_setTimeout;
window._setInterval+=+_setInterval;
window._clearTimeout+=+_clearTimeout;
window._clearInterval+=+_clearInterval;
})();|code-block|syntax|javascript|689938|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's my rough solution

<pre><code>(function(){
var index = 1;
var intervals = {},
 timeouts = {};

function postMessageHandler(e) {
 window.postMessage('', "*");

 var now = new Date().getTime();

 sysFunc._each.call(timeouts, function(ind, obj) {
 var targetTime = obj[1];

 if (now &gt;= targetTime) {
 obj[0]();
 delete timeouts[ind];
 }
 });
 sysFunc._each.call(intervals, function(ind, obj) {
 var startTime = obj[1];
 var func = obj[0];
 var ms = obj[2];

 if (now &gt;= startTime + ms) {
 func();
 obj[1] = new Date().getTime();
 }
 });
}
window.addEventListener("message", postMessageHandler, true);
window.postMessage('', "*");

function _setTimeout(func, ms) {
 timeouts[index] = [func, new Date().getTime() + ms];
 return index++;
}

function _setInterval(func, ms) {
 intervals[index] = [func, new Date().getTime(), ms];
 return index++;
}

function _clearInterval(ind) {
 if (intervals[ind]) {
 delete intervals[ind]
 }
}
function _clearTimeout(ind) {
 if (timeouts[ind]) {
 delete timeouts[ind]
 }
}

var intervalIndex = _setInterval(function() {
 console.log('every 100ms');
}, 100);
_setTimeout(function() {
 console.log('run after 200ms');
}, 200);
_setTimeout(function() {
 console.log('closing the one that\'s 100ms');
 _clearInterval(intervalIndex)
}, 2000);

window._setTimeout = _setTimeout;
window._setInterval = _setInterval;
window._clearTimeout = _clearTimeout;
window._clearInterval = _clearInterval;
})();
</code></pre>

blocks|key|906212|text|使用audio标签和处理ontimeupdate事件，我能够调用我的回调函数至少250ms。它在一秒钟内调用了3-4次。它比setTimeout落后一秒还好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|906213|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I was able to call my callback function at minimum of 250ms using audio tag and handling its ontimeupdate event. Its called 3-4 times in a second. Its better than one second lagging setTimeout

blocks|key|690073|text|深受Ruslan+Tushov库的影响，我创建了自己的小library。只需在<head>中添加脚本，它就会用使用WebWorker的脚本修补setInterval和setTimeout。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|690074|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/myonov/momentum^0|13|6|1L|9|1Z|B|2B|A|S|7|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|F|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Heavily influenced by Ruslan Tushov's library, I've created my own small <a href="https://github.com/myonov/momentum" rel="nofollow noreferrer">library</a>. Just add the script in the <code>&lt;head&gt;</code> and it will patch <code>setInterval</code> and <code>setTimeout</code> with ones that use <code>WebWorker</code>.

blocks|key|906328|text|播放音频文件可暂时确保完整的后台Javascript性能|type|unstyled|depth|inlineStyleRanges|entityRanges|data|906329|对我来说，这是最简单和最少干扰的解决方案除了播放微弱/几乎空的声音之外，没有其他潜在的副作用。|906330|你可以在这里找到详细信息：https://stackoverflow.com/a/51191818/914546|offset|length|906331|(从其他答案中，我看到有些人使用Audio标签的不同属性，我确实想知道是否可以使用Audio标签来获得完整的性能，而不是实际播放一些东西)|906332|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/51191818/914546^0|0|0|D|17|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$F|U|G|V|1|W]]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

Playing an audio file ensures full background Javascript performance for the time being

For me, it was the simplest and least intrusive solution - apart from playing a faint / almost-empty sound, there are no other potential side effects

You can find the details here: <a href="https://stackoverflow.com/a/51191818/914546">https://stackoverflow.com/a/51191818/914546</a>

(From other answers, I see that some people use different properties of the Audio tag, I do wonder whether it's possible to use the Audio tag for full performance, without actually playing something)

blocks|key|690182|text|这是一个很老的问题，但我遇到了同样的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|690183|如果你在chrome上运行你的网站，你可以通读这篇文章的Background+Tabs+in+Chrome+57+。|offset|length|690184|基本上，如果时间间隔计时器没有用完计时器预算，它就可以运行。|690185|预算消耗基于定时器内任务的CPU时间使用情况。|690186|根据我的场景，我将视频绘制到画布并传输到WebRTC。|690187|即使选项卡处于非活动状态，webrtc视频连接也会保持更新。|690188|但是，您必须使用setInterval而不是requestAnimationFrame。|style|CODE|690189|不过，不建议将其用于UI渲染。|690190|侦听visibilityChange事件并相应地更改呈现机制会更好。|690191|此外，你可以尝试@kaan-+could，它应该可以基于文档工作。|690192|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/web/updates/2017/03/background_tabs^0|0|S|T|0|0|0|0|0|0|8|B|M|L|0|0|2|G|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|F|3|G|5|6|7|1A|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1B|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1C|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1D|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1E|8|@$D|1F|E|1G|P|Q]|$D|1H|E|1I|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1J|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1K|8|@$D|1L|E|1M|P|Q]]|9|@]|A|$]]|$1|V|3|W|5|6|7|1N|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]]]

It is quite old question but I encountered the same issue. 
If you run your web on chrome, you could read through this post <a href="https://developers.google.com/web/updates/2017/03/background_tabs" rel="nofollow noreferrer">Background Tabs in Chrome 57
</a>. 

Basically the interval timer could run if it haven't run out of the timer budget. 
The consumption of budget is based on CPU time usage of the task inside timer. 
Based on my scenario, I draw video to canvas and transport to WebRTC. 
The webrtc video connection would keep updating even the tab is inactive. 

However you have to use <code>setInterval</code> instead of <code>requestAnimationFrame</code>. 
it is not recommended for UI rendering though. 

It would be better to listen <code>visibilityChange</code> event and change render mechenism accordingly. 

Besides, you could try @kaan-soral and it should works based on the documentation.

blocks|key|906448|text|我在这里为试图在计时器函数中解决这个问题的任何人提供了一个简单的解决方案，正如上面提到的@kbtzr，我们可以使用Date对象而不是固定的增量来计算从开始到现在已经过去的时间，即使你离开了应用程序的标签，它也可以工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|906449|
<body>
++<p+id="time">
</body>|code-block|syntax|javascript|906450|。|906451|//+JavaScript
let+display+=+document.querySelector('#time')
let+interval
let+time
function+startTimer()+{
++++let+initialTime+=+new+Date().getTime()
++++interval+=+setInterval(()+=>+{
++++++++let+now+=+new+Date().getTime()
++++++++time+=+(now+-+initialTime)+%2B+10
++++++++display.innerText+=+`${Math.floor((time+/+(60+*+1000))+%25+60)}:${Math.floor((time+/+1000)+%25+60)}:${Math.floor((time+/+10)+%25+100)}`
++++},+10)
}
startTimer()|906452|这样，即使由于非活动选项卡的性能原因而增加了间隔值，所做的计算也将保证正确的时间。这是一个普通的代码，但是我在我的React应用程序中使用了这个逻辑，您也可以根据需要对其进行修改。|906453|我希望它能帮助到某个人。|906454|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I bring here a simple solution for anyone who is trying to get around this problem in a timer function, where as @kbtzr mentioned above we can use the Date object instead of fixed increments to calculate the time that has passed since the beginning, which will work even if you are out from the application's tab.
<pre><code>&lt;!-- HTML --&gt;
&lt;body&gt;
 &lt;p id=&quot;time&quot;&gt;&lt;/p&gt;
&lt;/body&gt;
</code></pre>
.
<pre><code>// JavaScript
let display = document.querySelector('#time')
let interval
let time
function startTimer() {
 let initialTime = new Date().getTime()
 interval = setInterval(() =&gt; {
 let now = new Date().getTime()
 time = (now - initialTime) + 10
 display.innerText = `${Math.floor((time / (60 * 1000)) % 60)}:${Math.floor((time / 1000) % 60)}:${Math.floor((time / 10) % 100)}`
 }, 10)
}
startTimer()
</code></pre>
That way, even if the interval value is increased for performance reasons of inactive tabs, the calculation made will guarantee the correct time. This is a vanilla code, but I used this logic in my React application, and you can modify it for wherever you need as well.
I hope it helped someone.

I have a <code>setInterval</code> running a piece of code 30 times a second. This works great, however when I select another tab (so that the tab with my code becomes inactive), the <code>setInterval</code> is set to an idle state for some reason.

I made this simplified test case (<a href="http://jsfiddle.net/7f6DX/3/" rel="noreferrer">http://jsfiddle.net/7f6DX/3/</a>):

<pre><code>var $div = $('div');
var a = 0;

setInterval(function() {
 a++;
 $div.css("left", a)
}, 1000 / 30);
</code></pre>

If you run this code and then switch to another tab, wait a few seconds and go back, the animation continues at the point it was when you switched to the other tab. So the animation isn't running 30 times a second in case the tab is inactive. This can be confirmed by counting the amount of times the <code>setInterval</code> function is called each second - this will not be 30 but just 1 or 2 if the tab is inactive.

I guess that this is done by design so as to improve performance, but is there any way to disable this behaviour? It is actually a disadvantage in my scenario.

How can I make setInterval also work when a tab is inactive in Chrome?

HTML5

我有一个setInterval每秒运行一段代码30次。这很有效，但是当我选择另一个选项卡时(这样包含我代码的选项卡变得不活动)，由于某种原因，setInterval被设置为空闲状态。我做了这个简化的测试用例()：var $div = $('div');var a = 0;setInterval(function() {...

问当一个标签在Chrome中处于非活动状态时，我如何让setInterval也能工作？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当一个标签在Chrome中处于非活动状态时，我如何让setInterval也能工作？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当一个标签在Chrome中处于非活动状态时，我如何让setInterval也能工作？
EN