0

Есть ли удобный способ прервать setInterval на определенное время, не замораживая при этом страницу? Важно потом продолжить выполнение setInterval.

1
  • 2
    clearInterval(timer); и снова timer = setInterval(...);
    – user176262
    10 апр 2018 в 19:08

1 ответ 1

2

Как уже ответили в комментариях - можно снимать интервал, и заново выставлять. Это самый простой и разумный способ временно прервать его выполнение.

Но если необходимо приостановить интервал (чтобы впоследствии продолжить с времени последнего отсчета) - вот пример решения такой задачи:

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мс, но я еще не встречал задач где реально требовалась большая точность :)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.