Code
2024-10-26 08:00:02

我如何才能使setInterval也工作时，一个标签是不活跃的Chrome?

我有一个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。

我想这样做是为了提高系统性能，但是有什么方法可以禁用这种行为吗?

这在我看来是劣势。

当前回答

在大多数浏览器上，不活跃的选项卡执行优先级低，这可能会影响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>

对于后台任务(与ui无关)

@UpTheCreek评论:

表现问题没问题，但还是 有些事情你需要继续做下去。

如果你有后台任务需要在给定的时间间隔内精确执行，你可以使用HTML5 Web Workers。看看下面Möhre的回答，了解更多细节…

CSS vs JS的“动画”

这个问题和其他许多问题都可以通过使用CSS转换/动画来避免，而不是基于JavaScript的动画，这会增加相当大的开销。我推荐这个jQuery插件，它可以让你像animate()方法一样从CSS过渡中受益。

2011-05-08 12:34:17

其他回答

在大多数浏览器上，不活跃的选项卡执行优先级低，这可能会影响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>

对于后台任务(与ui无关)

@UpTheCreek评论:

表现问题没问题，但还是 有些事情你需要继续做下去。

如果你有后台任务需要在给定的时间间隔内精确执行，你可以使用HTML5 Web Workers。看看下面Möhre的回答，了解更多细节…

CSS vs JS的“动画”

这个问题和其他许多问题都可以通过使用CSS转换/动画来避免，而不是基于JavaScript的动画，这会增加相当大的开销。我推荐这个jQuery插件，它可以让你像animate()方法一样从CSS过渡中受益。

2011-05-08 12:34:17

这是一个很老的问题，但我遇到了同样的问题。

如果你在chrome上运行你的网页，你可以阅读这篇文章在chrome 57的背景标签。

基本上间隔计时器可以运行，如果它没有耗尽定时器预算。

预算的消耗基于计时器内任务的CPU时间使用情况。

基于我的场景，我将视频绘制到画布上并传输到WebRTC。

webrtc视频连接将保持更新，即使标签是不活跃的。

然而，你必须使用setInterval而不是requestAnimationFrame，但是itt不推荐用于UI渲染。

最好是监听visibilityChange事件并相应地改变渲染机制。

此外，您可以尝试Kaan Soral建议的方法，它应该可以根据文档工作。

2020-02-19 09:23:43

只要这样做:

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规范允许的最小值:4毫秒(而不是以前的10毫秒)。

2011-09-12 12:35:45

受Ruslan Tushov图书馆的影响，我创建了自己的小型图书馆。只需在<head>中添加脚本，它将修补setInterval和setTimeout与那些使用WebWorker的。

2017-08-17 12:28:11

我修改了Lacerda的回应，添加了一个功能正常的UI。

我添加了启动/恢复/暂停/停止操作。

const timer = document.querySelector('.timer'), timerDisplay = timer.querySelector('.timer-display'), toggleAction = timer.querySelector('[data-action="toggle"]'), stopAction = timer.querySelector('[data-action="stop"]'), tickRate = 10; let intervalId, initialTime, pauseTime = 0; const now = () => new Date().getTime(); const formatTime = (hours, minutes, seconds) => [hours, minutes, seconds] .map(v => `${isNaN(v) ? 0 : v}`.padStart(2, '0')) .join(':'); const update = () => { let time = (now() - initialTime) + 10, hours = Math.floor((time / (60000)) % 60), minutes = Math.floor((time / 1000) % 60), seconds = Math.floor((time / 10) % 100); timerDisplay.textContent = formatTime(hours, minutes, seconds); }; const startTimer = () => { initialTime = now(); intervalId = setInterval(update, tickRate); }, resumeTimer = () => { initialTime = now() - (pauseTime - initialTime); intervalId = setInterval(update, tickRate); }, pauseTimer = () => { clearInterval(intervalId); intervalId = null; pauseTime = now(); }, stopTimer = () => { clearInterval(intervalId); intervalId = null; initialTime = undefined; pauseTime = 0; }, restartTimer = () => { stopTimer(); startTimer(); }; const setButtonState = (button, state, text) => { button.dataset.state = state; button.textContent = text; }; const handleToggle = (e) => { switch (e.target.dataset.state) { case 'pause': setButtonState(e.target, 'resume', 'Resume'); pauseTimer(); break; case 'resume': setButtonState(e.target, 'pause', 'Pause'); resumeTimer(); break; default: setButtonState(e.target, 'pause', 'Pause'); restartTimer(); } }, handleStop = (e) => { stopTimer(); update(); setButtonState(toggleAction, 'initial', 'Start'); }; toggleAction.addEventListener('click', handleToggle); stopAction.addEventListener('click', handleStop); update(); html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; background: #000; } .timer { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5em; } .timer .timer-display { font-family: monospace; font-size: 3em; background: #111; color: #8F8; border: thin solid #222; padding: 0.25em; } .timer .timer-actions { display: flex; justify-content: center; gap: 0.5em; } .timer .timer-actions button[data-action] { font-family: monospace; width: 6em; border: thin solid #444; background: #222; color: #EEE; padding: 0.5em; cursor: pointer; text-transform: uppercase; } .timer .timer-actions button[data-action]:hover { background: #444; border: thin solid #666; color: #FFF; } <div class="timer"> <div class="timer-display"></div> <div class="timer-actions"> <button data-action="toggle" data-state="initial">Start</button> <button data-action="stop">Stop</button> </div> </div>

2022-05-24 13:29:08

推荐文章

aliyun

最新文章

标签

2024 code 京ICP备15047053号-1