切换到另一个选项卡时animationend不起作用

Question

I have this JavaScript:

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

It works okay when my tab is in the foreground. But when I switch to another tab, it pauses. If I switch back to my tab, it will resume working then show the alert.

I want my handler to fire even when I have another tab active.

Answer 1

To me it looks wise that the browsers pause the frontend processing when a tab is inactive: frames, timers, etc..

In my opinion if you need to do something at the end of an animation and the exact time matters for you, you need to rethink it completely, you can't rely on those events / animations / timers.

Maybe webworkers if it can suit your needs ?

https://jsfiddle.net/23rgtotc/3/ console.log('start', new Date());

The above example / log shows that the time when the event is triggered is when you get back to the tab, not just 5 seconds after.

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.