Добрый день. Делаю самопальный progress-bar на основе bootstrap-овского
Код:
var bar = form.find(".edit-toggle-block .progress .progress-bar");
var steps = 2 * {$block_info -> default_block_time} - 1; // how many steps of that func we can make during edit period (2 - because we make 2 steps per sec; -1 because we can't make 1st move)
var width_delta = 100 / steps; // delta percent that we can jump for
progressInterval = setInterval(function(){
var width = bar.width() / bar.parent().width() * 100;
bar.css("width", width+width_delta+"%");
}, 500);
Вставки через {} - это Smarty
Этот же таймер используется ещё в одном месте, вызывает некую функцию №2 с визуальными изменениями
Разница в поведении:
- Если ждать исполнения скрипта, находясь на вкладке, progress-bar доходит до 100% и вызывается функция №2, визуально подтверждено
- Если вызвать скрипт, сменить вкладку браузера, посидеть там некоторое время, и успеть вернуться до окончания его работы, progress-bar как будто сдвинулся, даже до сих пор двигается, но функция №2 вызывается далеко не на 100% - зависит от времени нахождения на других вкладках, чем дольше - тем больше рассинхрон функции и прогресс-бара
Засекал с секундомером, функция №2 всегда вызывается точно по времени, а вот прогресс-бар постоянно ведёт себя по-разному, неправильно складывает дельту, если вкладка фоновая
Вопрос, как заставить его нормально отрабатывать в фоне?
p.s. Думал, что это зависит от CSS-свойства transition и его аргумента - зависит только если время transition больше или равно интервала выполнения функции, при меньших значениях отрабатывает нормально (на вкладке, опять же, не в фоне)
p.p.s. Браузер Google Chrome (Версия 88.0.4324.150)
Простой
Средний