WINDOW TIMERS JAVASCRIPT

❮ Prev Next ❯

Timers in javascript provide a functionality to delay the function call for a certain time or to call a function continuously after a regular interval of time.

There are 2 different types of timer function in javascript:

setInterval(function, milliseconds) - This executes a function at a regular interval of time (in milliseconds)
setTimeout(function, milliseconds) - This executes a function after the given amount of time (in milliseconds)

Let's look at some scenarios and see what javascript functionality to use to invoke functions in the given scenarios.

Scenario	What to use
To invoke function for 'n' number of times	Use javascript loop, loop for 'n' number of times and invoke function in each iteration
To invoke a function on some event	Use 'addEventListener' method and bind the function with desired event
Invoke a function after some time	Use `setTimeout()` method
Invoke a function regularly at a certain interval of time	Use `setInterval()` method

The setInterval Method

The setInterval() method executes a function repeatedly after a fixed interval of time.

The setInterval() method is a method of window interface, hence it is a global method.

setInterval(function, milliseconds);

The setInterval() method contains 2 parameters:

function - It is a function that user you want to invoke
Time - It is given time (in milliseconds) after which function repeats its execution

In the following example the setInterval function repeatedly prints counting after 1 second.

var count = 1;
var element = document.getElementById("output");
function counting(){
  element.innerHTML += count + "
";
  count++;
}
setInterval(counting, 1000); //Calling function after 1 sec

▶ Run the code

How To Stop setInterval() From Calling A Function?

If you don't stop the setInterval method from calling the function then it will keep execution the function till infinity. So we need to stop the interval.

To stop the setInterval() method use clearInterval() method and pass the instance of setInterval() function (When called setInterval() method it returns an instance which can be stored in a variable).

var intervalInstance = setInterval();
clearInterval(intervalInstance);

The following example contains a button which onclick clears interval of counter function.

<button onclick="clearIt()">Clear Interval</button>

<script>
  function clearIt(){
    clearInterval(interval); //clearing interval
  }
  var interval = setInterval(counting, 1000);
  var count = 1;
  var element = document.getElementById("output");
  function counting(){
    element.innerHTML += count + "<br>";
    count++;
  }
</script>

▶ Run the code

The setTimeout Method

The setTimeout() method executes a function after a specified time interval.

The setTimeout() method receives two parameter :

function - It is a function that user you want to invoke
Time - It is given time (in milliseconds) after which function is executed

The following example shows the current time after 3 seconds.

setTimeout(printTime, 3000);
var element = document.getElementById("output");
function printTime(){
  element.innerHTML = new Date();
}

▶ Run the code

How To Stop setTimeout() From Calling A Function?

The clearTimeout() method stops the function execution in setTimeout().

The clearTimeout() method is a window method, so can be used with or without referring to the window

clearTimeout(timeoutReference);
var timeoutReference = setTimeout();

The setTimeout() method returns a reference which is passed in the clearTimeout() as an argument to clear timeout.

The following method prints time after three second, stopping it from printing by clearing setTimeout().

var ref;
var element = document.getElementById("output");
function printTime() {
  ref = setTimeout(showTime, 3000);
}
function stopIt() {
  clearTimeout(ref);
}
function showTime() {
  element.innerHTML = new Date();
}

▶ Run the code

❮ Prev Next ❯