我有一个setInterval在每秒钟运行30次的代码片段。这个很好用，但是当我选择另一个标签页（使得我的代码所在的标签页成为非活动状态）时，setInterval会因某些原因进入空闲状态。
我创建了这个简化的测试用例 (http://jsfiddle.net/7f6DX/3/):
var $div = $('div');
var a = 0;
setInterval(function() {
a++;
$div.css("left", a)
}, 1000 / 30);
setInterval函数每秒调用的次数来确认-如果标签页处于非活动状态，则此数字将不会是30，而只有1或2次。在大多数浏览器中，非活动选项卡具有低优先级的执行顺序，这可能会影响JavaScript计时器。
如果您的过渡值是使用帧之间的实际时间差而不是每个间隔固定增量来计算的，那么您不仅可以解决此问题，还可以通过使用requestAnimationFrame实现更流畅的动画效果，因为它可以在处理器不太繁忙的情况下达到最高60fps。
以下是一个使用requestAnimationFrame的原始JavaScript示例，用于进行动画属性过渡：
var target = document.querySelector('div#target')
var startedAt, duration = 3000
var domain = [-100, window.innerWidth]
var range = domain[1] - domain[0]
function start() {
startedAt = Date.now()
updateTarget(0)
requestAnimationFrame(update)
}
function update() {
let elapsedTime = Date.now() - startedAt
// playback is a value between 0 and 1
// being 0 the start of the animation and 1 its end
let playback = elapsedTime / duration
updateTarget(playback)
if (playback > 0 && playback < 1) {
// Queue the next frame
requestAnimationFrame(update)
} else {
// Wait for a while and restart the animation
setTimeout(start, duration/10)
}
}
function updateTarget(playback) {
// Uncomment the line below to reverse the animation
// playback = 1 - playback
// Update the target properties based on the playback position
let position = domain[0] + (playback * range)
target.style.left = position + 'px'
target.style.top = position + 'px'
target.style.transform = 'scale(' + playback * 3 + ')'
}
start()body {
overflow: hidden;
}
div {
position: absolute;
white-space: nowrap;
}<div id="target">...HERE WE GO</div>@UpTheCreek 评论:
处理演示问题很好，但还是有一些需要持续运行的任务。
如果您有需要精确按给定时间间隔执行的后台任务，则可以使用 HTML5 Web Workers。查看下面的 Möhre 的答案 以获取更多详细信息…
使用 CSS 转换/动画而不是基于 JavaScript 的动画可避免此问题和许多其他问题，因为后者会增加相当大的开销。我推荐使用这个 jQuery 插件 ，它使您可以像使用 animate() 方法一样利用 CSS 转换。
.stop是否有助于该情况（因为每次它都会清除之前的动画）？ - user359135before = now;，以获取自上一次调用结束而不是开始后经过的时间。这通常是在动画时所需的。现在，如果间隔函数的执行需要15毫秒，则 elapsedTime 将在下一次调用时（当选项卡处于活动状态时）给出35毫秒（而不是50毫秒，即间隔时间）。 - Jonas Berlin我遇到了与音频淡出和HTML5播放器相同的问题。当标签变成非活动状态时，它就会卡住。 后来我发现WebWorker允许无限制地使用间隔/超时。我使用它向主JavaScript发布“ticks”。
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;
}
});
可以使用 Web Workers（如上所述的）解决问题，因为它们运行在单独的进程中，不会被拖慢。
我编写了一个小脚本，可以在不更改您的代码的情况下使用 - 它只是覆盖了 setTimeout、clearTimeout、setInterval 和 clearInterval 函数。
只需在所有代码之前包含它即可。
setInterval和requestAnimationFrame在选项卡不活动时不起作用，或者在不正确的时间间隔内工作。解决方案是使用另一个时间事件源。例如，Web Sockets或Web Workers是两个在选项卡不活动时正常工作的事件源。因此，不需要将所有代码移到Web Worker中，只需将Worker用作时间事件源：
// worker.js
setInterval(function() {
postMessage('');
}, 1000 / 50);
.
var worker = new Worker('worker.js');
var t1 = 0;
worker.onmessage = function() {
var t2 = new Date().getTime();
console.log('fps =', 1000 / (t2 - t1) | 0);
t1 = t2;
}
对我来说，像其他人一样在后台播放音频并不重要，我的问题是当你在其他标签页中并返回到它们时，一些动画会变得很疯狂。我的解决方法是将这些动画放在防止非活动标签页的if中：
if (!document.hidden){ //your animation code here }
多亏如此，我的动画只在选项卡处于活动状态时才运行。我希望这能对遇到类似情况的人有所帮助。
只需这样做：
var $div = $('div');
var a = 0;
setInterval(function() {
a++;
$div.stop(true,true).css("left", a);
}, 1000 / 30);
浏览器中未激活的选项卡会缓冲部分setInterval或setTimeout函数。
stop(true,true)将停止所有缓冲事件，并立即执行最后一个动画。
window.setTimeout()方法现在会限制发送不超过一次超时时间，每秒钟一次，在非活动选项卡中。此外，它现在会将嵌套超时限制为HTML5规范允许的最小值：4ms（而不是它过去限制为10ms）。
setInterval的替代品：class WorkerInterval {
worker = null;
constructor(callback, interval) {
const blob = new Blob([`setInterval(() => postMessage(0), ${interval});`]);
const workerScript = URL.createObjectURL(blob);
this.worker = new Worker(workerScript);
this.worker.onmessage = callback;
}
stop() {
this.worker.terminate();
}
}
使用示例：
const interval = new WorkerInterval(callback, 100);
// sometime later
interval.stop();
requestAnimationFrame导致的。由于其中一些小问题（比如这个），他们将其移除了。在1.7中，您不会看到这种行为。 http://jsfiddle.net/TAHDb/1/。因为间隔是每秒钟一次，所以实际上对我发布的问题没有影响，因为对于非活动选项卡的最大值也是每秒钟一次 - 这没有任何区别。 - pimvdb<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应用程序中使用了这个逻辑，并且您也可以根据需要进行修改。