How can I pause setInterval functions

Question

How do I pause and resume the setInterval() function using Javascript?

For example, maybe I have a stopwatch to tell you the number of seconds that you have been looking at the webpage. There is a 'Pause' and 'Resume' button. The reason why clearInterval() would not work here is because if the user clicks on the 'Pause' button at the 40th second and 800th millisecond, when he clicks on the 'Resume' button, the number of seconds elapsed must increase by 1 after 200 milliseconds. If I use the clearInterval() function on the timer variable (when the pause button is clicked) and then using the setInterval() function on the timer variable again (when the resume button is clicked), the number of seconds elapsed will increase by 1 only after 1000 milliseconds, which destroys the accuracy of the stopwatch.

So how do I do that?

User · Answer

My simple way   function Timer  callback  delay      let callbackStartTime   let remaining   0    this timerId   null   this paused   false    this pause        gt        this clear       remaining -  Date now   - callbackStartTime     this paused   true       this resume        gt        window setTimeout this setTimeout bind this   remaining      this paused   false       this setTimeout        gt        this clear       this timerId   window setInterval      gt          callbackStartTime   Date now         callback          delay        this clear        gt        window clearInterval this timerId         this setTimeout        How to use     x000D   x000D  let seconds   0 x000D  const timer   new Timer      gt    x000D    seconds   x000D     x000D    console log  seconds   seconds  x000D   x000D    if  seconds     8    x000D      timer clear   x000D   x000D      alert  Game over    x000D      x000D     1000  x000D   x000D  timer pause   x000D  console log  isPaused     timer paused  x000D   x000D  setTimeout      gt    x000D    timer resume   x000D    console log  isPaused     timer paused  x000D     2500  x000D   x000D   x000D  function Timer  callback  delay    x000D    let callbackStartTime x000D    let remaining   0 x000D   x000D    this timerId   null x000D    this paused   false x000D   x000D    this pause        gt    x000D      this clear   x000D      remaining -  Date now   - callbackStartTime x000D      this paused   true x000D      x000D    this resume        gt    x000D      window setTimeout this setTimeout bind this   remaining  x000D      this paused   false x000D      x000D    this setTimeout        gt    x000D      this clear   x000D      this timerId   window setInterval      gt    x000D        callbackStartTime   Date now   x000D        callback   x000D         delay  x000D      x000D    this clear        gt    x000D      window clearInterval this timerId  x000D      x000D   x000D    this setTimeout   x000D    x000D   x000D   x000D    The code is written quickly and did not refactored  raise the rating of my answer if you want me to improve the code and give ES2015 version  classes

User · Answer

I know this thread is old  but this could be another solution   var do this   null   function y          what you wanna do    do this   setInterval y  1000    function y start        do this   setInterval y  1000      function y stop        do this   clearInterval do this

User · Answer

i wrote a simple ES6 class that may come handy. inspired by https://stackoverflow.com/a/58580918/4907364 answer

export class IntervalTimer {
    private callbackStartTime;
    private remaining= 0;
    private paused= false;
    public timerId = null;
    private readonly _callback;
    private readonly _delay;

    constructor(callback, delay) {
        this._callback = callback;
        this._delay = delay;
    }

    pause() {
        if (!this.paused) {
            this.clear();
            this.remaining = new Date().getTime() - this.callbackStartTime;
            this.paused = true;
        }
    }

    resume() {
        if (this.paused) {
            if (this.remaining) {
                setTimeout(() => {
                    this.run();
                    this.paused = false;
                    this.start();
                }, this.remaining);
            } else {
                this.paused = false;
                this.start();
            }
        }
    }

    clear() {
        clearInterval(this.timerId);
    }

    start() {
        this.clear();
        this.timerId = setInterval(() => {
            this.run();
        }, this._delay);
    }

    private run() {
        this.callbackStartTime = new Date().getTime();
        this._callback();
    }
}

usage is pretty straightforward,

const interval = new IntervalTimer(console.log(aaa), 3000);
interval.start();
interval.pause();
interval.resume();
interval.clear();

User · Answer

You shouldn t measure time in interval function  Instead just save time when timer was started and measure difference when timer was stopped paused  Use setInterval only to update displayed value  So there is no need to pause timer and you will get best possible accuracy in this way

User · Answer

While  Jonas Giuro is right when saying that      You cannot PAUSE the setInterval function  you can either STOP it  clearInterval   or let it run   On the other hand this behavior can be simulated with approach  VitaliyG suggested      You shouldn t measure time in interval function  Instead just save time when timer was started and measure difference when timer was stopped paused  Use setInterval only to update displayed value     x000D   x000D  var output      h1    x000D  var isPaused   false  x000D  var time   new Date    x000D  var offset   0  x000D  var t   window setInterval function     x000D    if  isPaused    x000D      var milisec   offset    new Date    getTime   - time getTime    x000D      output text parseInt milisec   1000     s      milisec   1000    x000D      x000D     10   x000D   x000D    with jquery x000D      toggle   on  click   function e    x000D    e preventDefault    x000D    isPaused    isPaused  x000D    if  isPaused    x000D      offset     new Date    getTime   - time getTime    x000D      else   x000D      time   new Date    x000D      x000D   x000D      x000D  h1   x000D      font-family  Helvetica  Verdana  sans-serif  x000D      font-size  12px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt h1 gt Seconds  0 lt  h1 gt  x000D   lt button class  toggle  gt Toggle lt  button gt  x000D   x000D   x000D

User · Answer

You could use a flag to keep track of the status    x000D   x000D  var output      h1    x000D  var isPaused   false  x000D  var time   0  x000D  var t   window setInterval function     x000D    if  isPaused    x000D      time    x000D      output text  Seconds      time   x000D      x000D     1000   x000D   x000D    with jquery x000D      pause   on  click   function e    x000D    e preventDefault    x000D    isPaused   true  x000D      x000D   x000D      play   on  click   function e    x000D    e preventDefault    x000D    isPaused   false  x000D      x000D  h1   x000D      font-family  Helvetica  Verdana  sans-serif  x000D      font-size  12px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt h1 gt Seconds  0 lt  h1 gt  x000D   lt button class  play  gt Play lt  button gt  x000D   lt button class  pause  gt Pause lt  button gt  x000D   x000D   x000D    This is just what I would do  I m not sure if you can actually pause the setInterval   Note  This system is easy and works pretty well for applications that don t require a high level of precision  but it won t consider the time elapsed in between ticks  if you click pause after half a second and later click play your time will be off by half a second

User · Answer

The following code  provides a precision way to pause resume a timer   How it works   When the timer is resumed after a pause  it generates a correction cycle using a single timeout  that will consider the pause offset  exact time when the timer was paused between cycles   After the correction cycle finishes  it schedules the following cycles with a regular setInteval  and continues normally the cycle execution   This allows to pause resume the timer  without losing the sync    Code     x000D   x000D  function Timer  fn callback     timer freq    x000D      let RESUME CORRECTION RATE   2  x000D   x000D      let  timer statusCode   x000D      let  timer clockRef   x000D   x000D      let  time ellapsed             will store the total time ellapsed x000D      let  time pause                stores the time when timer is paused x000D      let  time lastCycle            stores the time of the last cycle x000D   x000D      let  isCorrectionCycle   x000D    x000D          x000D         execute in each clock cycle x000D          x000D      const nextCycle   function    x000D             calculate deltaTime x000D          let  time delta           new Date   -  time lastCycle   x000D           time lastCycle       new Date    x000D           time ellapsed        time delta   x000D   x000D             if its a correction cicle  caused by a pause  x000D             destroy the temporary timeout and generate a definitive interval x000D          if   isCorrectionCycle     x000D              clearTimeout   timer clockRef     x000D              clearInterval   timer clockRef     x000D               timer clockRef       setInterval   nextCycle    timer freq      x000D               isCorrectionCycle    false  x000D            x000D             execute callback x000D           fn callback  apply  timer    timer      x000D         x000D   x000D         initialize timer x000D       time ellapsed        0  x000D       time lastCycle        new Date    x000D       timer statusCode      1  x000D       timer clockRef        setInterval   nextCycle    timer freq      x000D   x000D   x000D         timer public API x000D      const timer     x000D          get statusCode    return  timer statusCode     x000D          get timestamp    x000D              let abstime  x000D              if   timer statusCode     1   abstime    time ellapsed      new Date   -  time lastCycle     x000D              else if   timer statusCode     2   abstime    time ellapsed       time pause  -  time lastCycle     x000D              return abstime    0  x000D             x000D   x000D          pause   function    x000D              if   timer statusCode      1   return this  x000D                 stop timers x000D              clearTimeout   timer clockRef     x000D              clearInterval   timer clockRef     x000D                 set new status and store current time  it will be used on x000D                 resume to calculate how much time is left for next cycle x000D                 to be triggered x000D               timer statusCode    2  x000D               time pause          new Date    x000D              return this  x000D             x000D   x000D          resume  function    x000D              if   timer statusCode      2   return this  x000D               timer statusCode     1  x000D               isCorrectionCycle    true  x000D              const delayEllapsedTime    time pause  -  time lastCycle   x000D               time lastCycle       new Date  new Date   -   time pause  -  time lastCycle      x000D   x000D               timer clockRef    setTimeout   nextCycle    timer freq  - delayEllapsedTime - RESUME CORRECTION RATE   x000D   x000D              return this  x000D             x000D         x000D      return timer  x000D     x000D   x000D   x000D  let myTimer   Timer  x  gt  console log x timestamp   1000   x000D   lt input type  button  onclick  myTimer pause    value  pause  gt  x000D   lt input type  button  onclick  myTimer resume    value  resume  gt  x000D   x000D   x000D    Code source    This Timer is a modified and simplified version of advanced-timer  a js library created by myself  with many more functionalities      The full library and documentation is available in NPM and GITHUB

User · Answer

Why not use a simpler approach  Add a class   Simply add a class that tells the interval not to do anything  For example  on hover    x000D   x000D  var i   0  x000D  this setInterval function     x000D    if      counter   hasClass  pauseInterval        only run if it hasn t got this class  pauseInterval  x000D      console log  Counting       x000D          counter   html i       just for explaining and showing x000D      else   x000D      console log  Stopped counting    x000D      x000D     500   x000D   x000D     In this example  I m adding a class on mouseover and remove it again on mouseleave  You can of course do pretty much whatever you like    x000D      counter   hover function       mouse enter x000D        this  addClass  pauseInterval    x000D      function       mouse leave x000D        this  removeClass  pauseInterval    x000D      x000D     x000D   x000D     Other example    x000D      pauseInterval   click function     x000D        counter   toggleClass  pauseInterval    x000D      x000D  body   x000D    background-color   eee  x000D    font-family  Calibri  Arial  sans-serif  x000D    x000D   counter   x000D    width  50   x000D    background   ddd  x000D    border  2px solid  009afd  x000D    border-radius  5px  x000D    padding  5px  x000D    text-align  center  x000D    transition   3s  x000D    margin  0 auto  x000D    x000D   counter pauseInterval   x000D    border-color  red    x000D    x000D   lt  -- you ll need jQuery for this  If you really want a vanilla version  ask -- gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   lt p id  counter  gt  amp nbsp  lt  p gt  x000D   lt button id  pauseInterval  gt Pause lt  button gt  lt  p gt  x000D   x000D   x000D    I ve been looking for this fast and easy approach for ages  so I m posting several versions to introduce as many people to it as possible

[javascript] How can I pause setInterval() functions?

The answer is

Why not use a simpler approach? Add a class!

Examples related to javascript

Examples related to setinterval

Tags