小编典典

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

javascript

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

var $div = $('div');
var a = 0;

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

如果运行此代码,然后切换到另一个选项卡,请等待几秒钟,然后返回,动画将继续到切换到另一个选项卡时的位置。因此,如果该选项卡处于非活动状态,则动画不会每秒运行30次。可以通过计算setInterval每秒调用该函数的次数来确认这一点-
如果选项卡处于非活动状态,则不是30,而是1或2。

我想这是设计使然,以提高性能,但是有什么办法可以禁用这种行为?在我的情况下,这实际上是一个缺点。


阅读 1025

收藏
2020-04-25

共1个答案

小编典典

在大多数浏览器中,非活动选项卡的优先级较低,这可能会影响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无关)

评论:

对于演示文稿问题很好,但是仍然需要保持一些运行状态。

如果您有需要按给定间隔精确执行的后台任务,则可以使用HTML5WebWorkers。有关更多详细信息,请查看下面的Möhre答案 …

CSS vs JS“动画”

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

2020-04-25