JS Timing Functions

JavaScript Timing Function

JavaScript includes two build in timing functions, setInterval and setTimeout to call a function after certain time duration or to run a function once after certain time. Even HTML5 introduced a new timing function requestAnimationFrame to run smoother animations, mainly used in HTML5 Canvas.

Both setInterval and setTimeout have callback function for asynchronous programming with optional timing. This means a callback function in setInterval or setTimeout will be called after main thread is free and will not block code.

The reason for asynchronous operations of timings functions is JavaScript Event loop. Event Loop executes timings function callback after the time is over.

setInterval

The Javascript setInterval method repeatedly call a function till its stopped. The first parameter of setInterval is function name and second parameter (optional) is time (in milliseconds). As setInterval is a JS build in function, so no need to invoke function name in setInterval. See example

  setInterval( callback , [ delay, arg1, arg2, ... ] );
          

In the example above, callback is compulsory and other parameters like delay and arguments are optional.

<script>

    function myAlert(){
      alert("my alert");
    }                  
    setInterval(myAlert,1000)  
    // repeat function after every 1 second                     
</script>                              

Counter using setInterval

let counter=0;
function increaseCounter(){
  document.querySelector("p").innerHTML=++counter;
}

setInterval(increaseCounter,1000);

setTimeout

setTimeout method is used to call a function once but after a delay of some seconds. The first parameter of setTimeout method is function name and second is time in milliseconds.

setTimeout( callback , [ delay, arg1, arg2, ... ] );

In the example above, callback is compulsory and other parameters like delay and arguments are optional.

function myAlert(){
  alert("hey there");
}                    

setTimeout(myAlert,1000);   // run function after every 1 second

call a function after 1 second

function timeOut(){
document.querySelector("p").innerHTML="Hey, how do you do?";
}
setTimeout(timeOut,1000);                             
                  

clearInterval

clearInterval function is used to stop setInterval and setTimeout functions for further executions. The parameter in clearTimeout function is either id of setInterval/setTimeout or variable name of setInterval/setTimeout functions. See example

let counter=0;
function setTimer(){
   console.log(++counter);
}

setInterval(setTimer,1000);    // returns an integer id
  
clearInterval(id);     // stop setTimer function 

  let counter=0;
   function setTimer(){
   console.log(++counter);
   }
  let t1=setInterval(setTimer,1000);   
  
   clearInterval(t1);     // stop setTimer function  

Stop Watch

let counter=0;

document.querySelector("#btn3").addEventListener("click",function(){
    
  function increaseCounter(){
    document.querySelector("#counter3").innerHTML=++counter;
  }
  let t1=setInterval(increaseCounter,1000);

  document.querySelector("#btn4").addEventListener("click",function(){
    clearInterval(t1);  
  })        
});