我有这个 JavaScript:
$(function(){
var aE = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$('.animate').one(aE, function(){
alert('Animation End !!!');
});
});
当我的选项卡位于前台时，它可以正常工作。但是当我切换到另一个选项卡时，它会暂停。如果我切换回我的选项卡，它将恢复工作然后显示警报。
即使我有另一个选项卡处于事件状态，我也希望我的处理程序能够触发。
最佳答案
对我来说，当选项卡处于非事件状态时，浏览器暂停前端处理看起来是明智的:框架、计时器等。
在我看来，如果您需要在动画结束时执行某些操作并且确切的时间对您很重要，您需要完全重新考虑它，您不能依赖这些事件/动画/计时器。
也许网络 worker 可以满足您的需求？
https://jsfiddle.net/23rgtotc/3/
console.log('start', new Date());
上面的示例/日志显示，事件触发的时间是您返回选项卡时，而不仅仅是 5 秒后。
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
requestAnimationFrame() calls are paused in most browsers when running in background tabs or hidden s in order to improve performance and battery life.
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
To reduce the load (and associated battery usage) from background tabs, timeouts are throttled to firing no more often than once per second (1000 ms) in inactive tabs.
关于javascript - 切换到另一个选项卡时，animationend 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48338081/