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

小编典典

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

}

...HERE WE GO

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

评论：

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

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

CSS vs JS“动画”

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

2020-04-25