JavaScript

Timing Events in JavaScript

Events that are fired at a specific time interval to execute the JavaScript code are known as timing events. They can be used to delay the execution of code or to execute a block of code repeatedly after a specific time interval. These events are called global methods as they are directly available in the HTML DOM and can be invoked from anywhere in the code.

How to execute JavaScript Code after a specific time interval

To execute JavaScript code after a specific time interval, the window object is used.

There are two main/basic methods, used for timing events:

  • setTimeout() function
  • setInterval() function

Both of the above functions are used to run a block of code provided to them as a function to execute at a specified time interval but with a subtle difference. Let’s start by looking at the syntaxes of both the functions and the differences between these syntaxes:

setTimeout() function in JavaScript

The syntax of setTimeout() function is:

setTimeout(function, timeInterval)

// or

window.setTimeout(function, timeInterval)

 

Since we know that the window object is used to execute the JavaScript code after a specified interval of time however even if we do not use the window object with the setTimeout() or setInterval() function, they both will work the same.

The setTimeout() function takes two arguments as parameters:

  • One is a function that needs to be executed
  • The second is a time interval in milliseconds, after which the function specified in the first parameter will be executed.

The setTimeout() function is used to execute the provided function once after waiting for the time interval to be completed.

How to Stop the Execution of setTimeout() function

Sometimes, we need to stop the execution of the function defined/called in the setTimeout() function before even the mentioned time is reached. For example, while loading the data from the server, we show loaders on the web application, when the data is fetched before the expected time, we can just stop the loader and show the data.

clearTimeout() function in JavaScript

To stop the execution of the setTimeout() function, the clearTimeout() function is used:

Syntax

The syntax of the clearTimeout() function is:

clearTimeout(setTimeoutVariable)

 

The clearTimeout() function just takes the variable name which was returned by the setTimeout() function.

For example, if we have called the setTimeout() function:

holdExec = setTimeout(()=>{
  console.log(done);
}, 5000)

 

Now, to stop the execution of the setTimeout() function before the time interval gets completed, we have to provide the “holdExec” variable as an argument to the clearTimeout() function and the clearTimeout() function would go like this:

clearTimeout(holdExec);

If the function inside the setTimeout() function is not executed, then the execution of the setTimeout() function will be halted.

setInterval() function in JavaScript

The setInterval() function and its syntax is almost the same as the setTimeout() function yet the only difference between them is that the setInterval() function keeps on executing the function continuously after hitting the time interval.

The syntax of setInterval function is:

setInterval(function, timeInterval)

The setInterval() function also takes two arguments as parameters:

  • One is a function that needs to be executed every time after the specified time interval.
  • The second parameter is a time interval, after which the function will be executed again and again.

Now, the question arises here, if the setInterval() function keeps executing the function continuously then how can we stop the execution? The next section will explain it:

How to Stop the Execution of setInterval() function

Well, just like the clearTimeout() function, we also have the option of stopping the execution of the setInterval() function.

clearInterval() function in JavaScript

To stop the execution of the setInterval() function, the clearInterval() function is used:

Syntax

The syntax of the clearInterval() function is:

clearInterval(setIntervalVariable)

The clearInterval() function just takes the variable name which was returned by the setInterval() function.

For example, if we have call the setInterval() function:

holdExec = setInterval(()=>{
  console.log(holding...);
}, 100)

Now, to stop the execution of the setInterval() function whenever we want, we just have to provide the “holdExec” variable as an argument to the clearInterval() function and the clearInterval() function would go like this:

clearInterval(holdExec);

The execution of the setInterval() function will be halted right when you run the above-mentioned clearInterval() function.

Conclusion

JavaScript offers programmers a number of methods to asynchronously execute a block of code; these methods are called timing events. Timing events allow for periodic execution of JavaScript code; they also enable the programmer to delay the execution of certain blocks of code. In this tutorial we covered the basics of timing events in JavaScript; we learned what they are and how to use them in our code.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.