Есть ли удобный способ прервать setInterval на определенное время, не замораживая при этом страницу? Важно потом продолжить выполнение setInterval.
Как уже ответили в комментариях - можно снимать интервал, и заново выставлять. Это самый простой и разумный способ временно прервать его выполнение.
Но если необходимо приостановить интервал (чтобы впоследствии продолжить с времени последнего отсчета) - вот пример решения такой задачи:
var itrEl = document.getElementById('iterations'),
tfsEl = document.getElementById('time-from-start'),
pauseBtn = document.getElementById('pause'),
interval;
interval = new RAFInterval(() => {
itrEl.textContent = +itrEl.textContent + 1;
}, 5000);
interval.ontick = t => tfsEl.textContent = (t / 1000).toFixed(2);
pauseBtn.addEventListener('click', function () {
if (interval.togglePause())
this.textContent = 'Продолжить';
else
this.textContent = 'Приостановить';
});
interval.start();
function RAFInterval(func, delay, run = false) {
let rqst, tStart, tLast, tIter,
paused = false;
tStart = tLast = tIter = 0;
this.delay = delay;
this.ontick = null;
let fr = time => {
tLast = time;
if (!paused) {
tIter = time - tStart;
if (this.ontick)
this.ontick(tIter);
if (tIter > delay) {
func();
tStart = time;
}
}
rqst = requestAnimationFrame(fr);
};
this.togglePause = () => {
if (!(paused = !paused))
tStart = tLast - tIter;
return paused;
};
this.start = () => fr();
this.stop = () => cancelAnimationFrame(rqst);
if (run)
this.start();
}
Выполнено итераций: <span id="iterations">0</span><br>
Отсчет задержки: <span id="time-from-start">0</span>c<br>
<br>
<button id="pause">Приостановить</button>
У requestAnimationFrame
есть плюс: в тех ситуациях, когда классические таймеры "тормозят" из-за стремления браузера выжать максимум отзывчивости - он работает плавно. Конечно, его минимальная разрешающая способность ~15..20мс, но я еще не встречал задач где реально требовалась большая точность :)
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Как сравнить переменную по её типу? Например, если это число делать одно, а если строка, то другое, если объект, то третье?
Допустим хотим поставить обработчик события, и снять его тут же:
Добрый день! Нужна помощь знающих, который день мучаю пагинацию на Bootstrap в Angular-приложении, но не могу понять как заставить правильно работать...