当Chrome中的标签页处于非活动状态时，如何使setInterval也起作用？

Z时代
2024-01-10
分类：问答

我setInterval每秒要运行30次代码。这很好用，但是当我选择另一个选项卡（使带有我的代码的选项卡变为不活动状态）时，由于setInterval某种原因，该选项卡被设置为空闲状态。

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>