栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

在大多数浏览器中,非活动选项卡的优先级较低,这可能会影响Javascript计时器。

如果过渡的值是使用 帧之间的实时时间而不是每个间隔的固定增量来计算的,那么您不仅可以解决此问题,而且可以通过使用requestAnimationframe获得更流畅的动画,因为如果不使用处理器,它可以达到60fps很忙。

这是一个使用动画属性过渡的

requestAnimationframe
原始Javascript示例:

var target = document.querySelector('div#target')var startedAt, duration = 3000var 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转换中受益。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/402561.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号