How to Make a Resume Interval Function in JavaScript

When we create time interval, the interval is assigned with an id, and when we clear it we need to clear it with its id (detail explained in this article). This is why examples in this post all pre-clear interval before creating it in order to avoid duplicating intervals.

Now, what if we want to resume the interval which we have already cleared?

There is no native resume interval method, we need to build one for ourselves.

Cosider the following code:

0

<button onclick  = "startcount()">Start</button>
<button onclick  = "stopcount()">Stop</button>
<button onclick  = "resumecount()">Resume</button>
<div id = "showcount">0</div>

<script>
  var count;
  var interval;
  function counting(){
   showcount.innerHTML = count++;
  };
  
  function startcount(){
    count = 0; 
    clearInterval(interval);
  	interval = setInterval(counting,250);
  };
  
  function stopcount(){
  	clearInterval(interval);
  }; 
  
  function resumecount(){
    clearInterval(interval);
  	interval = setInterval(counting,250);
  };
</script>

This code is common when we start an interval, we want to reset all relevant variables by giving them values in the function that calls the interva.

 

We can see that the only difference between the startcount and the resumecount functions is that the startcount function reset the count varialbe while the resumestart functin does not.

So the logic behind creating a resume interval function is to reset variables at start and to not reset  variables for resuming.

Better Code

We can see it takes  4 functions to create a full functional start, pause and resume interval funtionality, which can easily result in messy code. It is better if we write them as an object to avoid confusing code.

<button onclick  = "myCounting.start()">Start</button>
<button onclick  = "myCounting.pause()">Pause</button>
<button onclick=" myCounting.resume()">Resume</button>
<div id = "showcount">0</div>

<script>
var count;
var myCounting = {
   interval:0,
   start:function(){
	 count = 0; ;
         clearInterval(this.interval);;
	 this.interval = setInterval(this.counting,250);	
  },
   pause:function(){
	 clearInterval(this.interval);
  },
   resume:function(){
	 clearInterval(this.interval);;
	 this.interval = setInterval(this.counting,250);
  },
   counting:function(){
	 showcount.innerHTML = count++;
  }
};
</script>

If the variables are only relevant no where else except to the re-iterate functions, we can write the whole thing in one object.

<button onclick  = "myCounting.start()">Start</button>
<button onclick  = "myCounting.pause()">Pause</button>
<button onclick=" myCounting.resume()">Resume</button>
<div id = "showcount">0</div>

<script>
 var myCounting = {
   data:{
	count:0	
   },
   interval:0,
   start:function(){
	 this.data.count = 0; 
         clearInterval(this.interval);
	 this.interval = setInterval(this.counting,250);	
   },
   pause:function(){
	 clearInterval(this.interval);
   },
   resume:function(){
	 clearInterval(this.interval);
	 this.interval = setInterval(this.counting,250);
   },
   counting:function(){
     //Here, 'this' is lost if called by setInterval(), we need to use the object instead of 'this'
	 showcount.innerHTML = myCounting.data.count++;
   }
  };
</script>

Now, the only last problem is there is this line "showcount.innerHTML = myCounting.data.count++;" in the counting method, which is annoying. I want to be able to use "this" so that my obj can be reusalble and my code is easier to maintain.

This is done by changing how this.counting is fired at the setInterval function so that this can always refer to the object.

<button onclick  = "myCounting.start()">Start</button>
<button onclick  = "myCounting.pause()">Pause</button>
<button onclick=" myCounting.resume()">Resume</button>
<div id = "showcount">0</div>

<script>
 var myCounting = {
   data:{
	count:0	
   },
   interval:0,
   start:function(){
	 this.data.count = 0; 
         clearInterval(this.interval);
	 this.interval = setInterval(()=>{this.counting()},250);	
   },
   pause:function(){
	 clearInterval(this.interval);
   },
   resume:function(){
	 clearInterval(this.interval);
	 this.interval = setInterval(()=>{this.counting()},250);
   },
   counting:function(){
     //Here, 'this' is preserved.
	 showcount.innerHTML = this.data.count++;
   }
  };
</script>