Question

我的js：

<script>
$(function(){
var aE = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('.animate').one(aE,function(){
alert('Animation End !!!');
});
});
</script>

它会正常工作。但当我切换另一个标签时，它暂停了。如果我退回其标签，它将恢复工作，然后显示警报。

现在，我希望它在切换另一个标签时有效。感谢。

Answer 1

对我而言，当选项卡处于非活动状态时，浏览器会暂停前端处理：帧，计时器等。

在我的观点中，如果你需要在动画结束时做一些事情并且确切的时间对你很重要，你需要完全重新考虑它，你不能依赖于事件/动画/计时器。

也许网络工作者是否能满足您的需求？

https://jsfiddle.net/23rgtotc/3/ {{1}}

上面的示例/日志显示触发事件的时间是您返回选项卡的时间，而不是仅仅在5秒之后。

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

requestAnimationFrame（）调用在后台标签或隐藏的s中运行时会在大多数浏览器中暂停，以提高性能和电池续航时间。

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

要减少背景标签的负载（以及相关的电池使用量），超时会被限制为在非活动标签中每秒不超过一次（1000毫秒）。

切换另一个标签

1 个答案: