我有一个setInterval，每秒运行一段代码30次。这工作得很好，但是当我选择另一个选项卡(使我的代码选项卡变得不活跃)，setInterval由于某种原因被设置为空闲状态。
我制作了这个简化的测试用例(http://jsfiddle.net/7f6DX/3/):
var $div = $('div');
var a = 0;
setInterval(function() {
a++;
$div.css("left", a)
}, 1000 / 30);
如果您运行这段代码，然后切换到另一个选项卡，等待几秒钟并返回，动画将继续在切换到另一个选项卡时的位置。
因此，如果标签处于非活动状态，动画不会每秒运行30次。这可以通过计算每秒调用setInterval函数的次数来确认——如果选项卡处于非活动状态，这将不是30，而是1或2。
我想这样做是为了提高系统性能，但是有什么方法可以禁用这种行为吗?
这在我看来是劣势。
当前回答
我为那些试图在计时器函数中解决这个问题的人带来了一个简单的解决方案，正如@kbtzr在另一个答案中提到的那样，我们可以使用Date对象而不是固定增量来计算自开始以来经过的时间，即使您离开了应用程序的选项卡，这也可以工作。
这是HTML示例。
<body>
<p id="time"></p>
</body>
然后这个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) + 10
display.innerText = `${Math.floor((time / (60 * 1000)) % 60)}:${Math.floor((time / 1000) % 60)}:${Math.floor((time / 10) % 100)}`
}, 10)
}
startTimer()
这样，即使由于非活动选项卡的性能原因而增加了间隔值，所做的计算也将保证正确的时间。这是一个普通的代码，但我在我的React应用程序中使用了这种逻辑，你也可以在任何你需要的地方修改它。
其他回答
我在使用HTML5播放器时也遇到了同样的问题。当标签变成非活动时，它被卡住了。 所以我发现WebWorker允许使用没有限制的间隔/超时。我用它来张贴“tick”到主javascript。
WebWorkers代码:
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);
主要Javascript:
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 += 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;
}
});
我能够调用我的回调函数在至少250ms使用音频标签和处理其ontimeupdate事件。它一秒钟被调用3-4次。这比一秒钟的滞后setTimeout要好
对我来说，像其他人一样在后台播放音频并不重要，我的问题是我有一些动画，当你在其他选项卡中回到它们时，它们就像疯了一样。我的解决方案是把这些动画放在里面，如果这是防止非活动标签:
if (!document.hidden){ //your animation code here }
多亏了这个，我的动画只有在TAB激活时才会运行。 我希望这能对我的案子有所帮助。
播放音频文件可以确保Javascript的完整后台性能
对我来说，这是最简单和侵入性最小的解决方案——除了播放微弱/几乎空的声音，没有其他潜在的副作用
你可以在这里找到详细信息:https://stackoverflow.com/a/51191818/914546
(从其他回答中，我看到一些人使用音频标签的不同属性，我想知道是否有可能使用音频标签的完整性能，而不实际播放一些东西)
我认为最好的理解这个问题的例子是:http://jsfiddle.net/TAHDb/
我在这里做了一件简单的事情:
间隔1秒，每次隐藏第一个跨度，并将其移动到最后，并显示第二个跨度。
如果你停留在页面上，它就像它所设想的那样工作。 但如果你把标签隐藏了几秒钟，当你回来的时候，你会看到一个奇怪的东西。
这就像所有在你现在不活跃的时候没有发生的事情都会在一次发生一样。所以在几秒钟内你会看到X个事件。它们是如此之快，以至于有可能同时看到所有6个跨度。
所以它接缝铬只延迟事件，所以当你回来所有的事件将发生，但所有的一次…
这是一个简单的幻灯片的实际应用。想象数字是图像，如果用户保持标签隐藏，当他回来的时候，他会看到所有的imgs浮动，完全混乱。
要解决这个问题，请像pimvdb告诉的那样使用stop(true,true)。 这将清除事件队列。
