Есть блок с анимацией. Анимация внутри класса (т.е. frame), поэтому, если вкладка неактивна, то браузер обновляет frame 2 раза в секунду, вместо 60. Поэтому, если повесить listener на animend, то он сработает гораздо позже, чем необходимо, если юзер в это время будет на другой вкладке.
Собственно, как решить эту проблему и вызвать callback ИЛИ когда анимация действительно закончится ИЛИ когда она должна была закончится?
Сначала попробовал прикрепить искусственный таймер с рекурсией, который доставал из класса animDuration и проверял, прошло ли необходимое время со старта анимации. Но тогда возникает проблема с тем, что браузер может дропнуть выполнение функции из-за большого колва вызовов.
Дальше я просто добавил setTimeout с 10ms. Но это тоже плохой выход, так как при неактивной вкладке, timeout будет вызывать гораздо реже, чем каждые 10ms.
Что можно сделать?
p.s. Вопрос принципиальный, т.к. приложение полу игровое и анимация яв. важной частью интерфейса.
Простой
Простой