JavaScript прервать setInterval не замораживая страницу

173
12 апреля 2018, 13:12

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

Answer 1

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

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

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

READ ALSO
JavaScript: сравнение по типу переменной

JavaScript: сравнение по типу переменной

Как сравнить переменную по её типу? Например, если это число делать одно, а если строка, то другое, если объект, то третье?

171
Как снять обработчик события, если он был добавлен с применением .bind(this)?

Как снять обработчик события, если он был добавлен с применением .bind(this)?

Допустим хотим поставить обработчик события, и снять его тут же:

172
Настроить пагинацию на Angular2 и Bootstrap

Настроить пагинацию на Angular2 и Bootstrap

Добрый день! Нужна помощь знающих, который день мучаю пагинацию на Bootstrap в Angular-приложении, но не могу понять как заставить правильно работать...

159