Как сделать, чтобы анимация числа работала не только при активном окне?

D
На сайте с 01.09.2015
Offline
59
232

Здравствуйте. Имеется анимация, которая увеличивает число до нужного значения через определенный интервал времени. Но проблема в том, что данная анимация работает только при активной окне, т.е. при переходе на другую вкладку (не закрывая страницу с анимацией) отчет останавливается. Как сделать так, чтобы анимация работала в соответствии с установленным интервалом вне зависимости от того активное окно с кодом в данный момент или нет?


let nums = [0, 16249, 36721, 53029, 81583, 124819]; // до какого числа анимировать
let secs = [0, 1, 1, 1, 1, 1]; //сколько времени будет длиться анимация
let pause = [3, 3, 3, 3, 3, 0]; //пауза, после которой, запустится следующая анимация
const elem = document.querySelector('.numnew');
const anim = (i, r) => {
let d = performance.now(),
from = +elem.textContent,
to = nums,
duration = secs * 1000;
requestAnimationFrame( function e(b) {
b = (b - d) / duration;
1 <= b && (b = 1);
let c = from + (to - from) * b | 0;
elem.innerHTML = c;
b == 1 && setTimeout(r,pause * 1000);
1 > b && requestAnimationFrame(e)
})
}
const delay = i => new Promise(r => anim(i, r));

(async () => {
for (let i = 0; i < secs.length; i++) {
await delay(i);
}
})();


<span class="numnew">0</span>
SocFishing
На сайте с 26.09.2013
Offline
118
#1

Проблема в остановке requestAnimationFrame - HTML5 в фоновом выполнении.

Вам нужно заменить. Все примеры и описание https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/

Зы. браузер рубит и таймеры в фоне, так что вы можете использовать данный хак https://github.com/turuslan/HackTimer через воркер.

Более простым решением буде добавить в конце кода window.onblur = function(){ } и при потере фокуса сразу выставлять конечное значение таймера и завершать цикл.

★Сервис идентифицирует (https://socfishing.com/?utm_source=searchengines) посетителей вашего сайта и предоставляет их профили ВКонтакте, Телефон, Почта! Цены копеечные, работаем 8 лет.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий