JavaScript Timing Events

There are sometimes that we need to execute JavaScript code in time-intervals. These are called Timing Events.
There are two timing events method in Javascript –

• setTimeout allows running a function once after an interval of time.
• setInterval allows running a function regularly with the interval between the runs.

These methods are actually not a part of JavaScript language but supported by all browsers and NodeJS.

setTimeout method in Javascript

The syntax is as below –

setTimeout(func, delay[, arg1, arg2..])

Func- h3

Anonymous callback Function to be executed.

Delay- h3

The delay before run, in milliseconds (1000 ms = 1 second).

Arg1, arg2…- h3

Optional Arguments for the function (not supported in IE9-)

Let jump into examples.
The below code will run the function sayJS() after 10 seconds. It will show an alert pop-up after 10 seconds.

function sayJS() {
 alert('Hello JS');
}
setTimeout(sayJS, 10000);

We can also use it with the optional arguments.

function sayJS(lang, role) {
 alert(lang + ' ' + role);
}
setTimeout(sayJS, 10000, "JavaScript", "Developer");

setInterval method in Javascript

The syntax is as below

setInterval(func, delay[, arg1, arg2..])

All arguments have the same meaning as setTimeout. But setInterval runs regularly after the given interval of time.

To stop further calls, we should call clearInterval(timerId). Let’s look at the complete example.

// repeat with the interval of 2 seconds
let timerId = setInterval(() => alert('Hello JS'), 2000);
// after 10 seconds stop
setTimeout(() => { clearInterval(timerId); alert('stoped...'); }, 10000);

Here we are using the arrow function to call the callback function inside only. Also, notice we have to use the setTimeout for clearInterval or else the browser won’t know when to run clearInterval.