JavaScript timers With Examples

This tutorial explains how to use javaScript timers function. JavaScript features a handy couple of methods of the window object: setTimeout() and setInterval(). These let you run a piece of JavaScript code at some point in the future. If we want to delay the execution of  Javascript code, then we need to use the time interval functions. These time intervals are called timing events. The block of JavaScript code is executed synchronously. But there are some JavaScript native functions (timers) which allow us to delay the execution and we can create an async kind of behavior.

Lets see the different type of timer function in javascript :

• setTimeout allows to run a function once after the interval of time.
• setInterval allows to run a function regularly with the interval between the runs.
• clearTimeout will stop the current running timer function.

setTimeout

The job of setTimeout is straightforward. You specify the callback function to execute later, and the value expressing how then you want it to run, in milliseconds.

syntax:

let timerId = setTimeout(func|code, delay[, arg1, arg2...])

Parameters:

• func|code : Function or a string of code to execute. Usually, that’s a function. For historical reasons, a string of code can be passed, but that’s not recommended.
• delay : The delay before run, in milliseconds (1000 ms = 1 second).
• arg1, arg2… : Arguments for the function (not supported in IE9-)

Lets see the simple example for setTimeout function in javascript :

setTimeout(() => {
  // This block run after 2 second 
  console.log("welcome to setTimeout")
}, 2000)

below output will display in browser console after 2 seconds : 

Output :-

------------------

> "welcome to setTimeout"

setTimeout function with arguments:

const myFunction = (firstParam, secondParam) => {
  // do something
  console.log("display value:- " + firstParam ,secondParam )
}

// runs after 2 seconds
setTimeout(myFunction, 2000, "one", "two")

below output will display in browser console after 2 seconds : 

Output :-

------------------

> "display value:- one" "two"

Zero delay :

If you specify the timeout delay to 0, the callback function will be executed as soon as possible, but after the current function execution:

setTimeout(() => {
  console.log('after ')
}, 0)

console.log(' before ')

Output :-

------------------

> " before "
> "after "

setInterval

setInterval is a function similar to setTimeout, with a difference: instead of running the callback function once, it will run it forever, at the specific time interval you specify (in milliseconds)

syntax:

let timerId = setInterval(func|code, delay[, arg1, arg2...])

Lets see the simple example for setInterval :

setInterval(() => {
  // This block will run every 2 seconds
   console.log("This is a example for setInterval")
}, 2000)

below output will display in browser console every 2 seconds : 

Output :-

------------------

> "This is a example for setInterval"
> "This is a example for setInterval"
> "This is a example for setInterval"
> "This is a example for setInterval"
> "This is a example for setInterval"
.....
.....
.....
so on

clearTimeout

This functon helps to stop current running timer function. Lets see the below examples for more information.

Example - 1 :

Let see the setTimeout function example using clearTimeout function. This will help to stop currently running timer function.

const id = setTimeout(() => {
  // should run after 2 seconds
  console.log("hello display data")
}, 2000)

// stop the timer function
clearTimeout(id)

Example - 2 :

Let see the setInterval function example using clearTimeout function. This will help to stop currently running timer function.

const id = setInterval(() => {
  // should run after 2 seconds
  console.log("hello display data")
}, 2000)

// stop the timer function
clearTimeout(id)

Recursive SetTimeout :

you can schedule a recursive setTimeout to be called when the callback function finishes:

const myFunction = () => {
  // do something
  console.log("executing...")
  setTimeout(myFunction, 1000)
}

setTimeout(myFunction(), 1000)

Output :-

--------------------

> "executing..."
> "executing..."
> "executing..."
> "executing..."
> "executing..."
.....
.....
.....
so on

This is all about setTimeout and setInterval JavaScript timers function. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.