The Javascript Interrupts – setTimeout() & setInterval()

Javascript provides interrupts that we can use to call our codes after a set period of time or at specified intervals. The two methods that provide these functionalities are the setTimeout() and setInterval() methods.

The setTimeout() method

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. It is executed only once.

The method requires two parameters

setTimeout(function_or_expression, millisecond);


Let’s say we want to change the background color of the body of our document after 5 seconds. We need a function:

function changeBodyBg() { = "red";

Then we use the setTimeout method:

const changeBg = setTimeout(changeBodyBg, 5000);

Cancelling timeout

We can stop the timeout before its execution with the clearTimeout() method.

Let’s create a function that stops the timeout and gives us a feedback that it has been stopped:

function unChangeBodyBg() {
document.getElementById("msg").innerHTML = "setTimeout stopped!";

in out HTML document we need to add a button and an empty div for the message:

<button id="stop">Stop Timeout</button>
<div id="msg"></div>

Then let’s reference the button and add an eventlistener to it

const btn = document.getElementById("stop");
btn.addEventListener("click", unChangeBodyBg);

Now if the button is clicked before the setTimeout() method executes, the timeout will not run and we will receive a feedback.

The setInterval() method

The setInterval() method calls a function or evaluates an expression at fixed intervals. The syntax is basically the same as with the setTimeout method.

setInterval(function_or_expression, millisecond);


Let’s create a circle and animate it with the setInterval method.

We need an empty div

<div id="circle"></div>

with some basic styling

#circle {
background-color: rgb(30, 131, 97);
border-radius: 50%;

Let’s reference the circle div and add a default width and height

const circle = document.getElementById("circle");
let circleWidth = 0;
let circleHeight = 0;

Let’s create a function that will make the circle grow at each interval

function animateCircle() {

circleWidth += 10;
circleHeight += 10;

if(circleWidth == 300) circleWidth = 0;
if(circleHeight == 300) circleHeight = 0; = circleWidth + 'px'; = circleHeight + 'px'; = "all 1s";


then finally call the setInterval method

const animation = setInterval(animateCircle, 1000);

Cancelling interval

To cancel the interval we need to use the clearInterval() method. It’s similar to cancelling setTimeout. We need a button:

<button id="stop">Stop Interval</button>

Then we create a function like this:

function stopInterval() {
document.getElementById("circle").innerHTML = "setInterval stopped!";

then we attach an eventlistener to the button to stop the interval

const btn = document.getElementById("stop");
btn.addEventListener("click", stopInterval);



Christian Kovats is a London-based web designer who loves crafting innovative and user-friendly interfaces. His passion for design is only rivaled by his love for nature and hiking, often drawing inspiration from his treks through the diverse landscapes of the UK. Outside of work, Christian enjoys spending quality time with his wife and 4-year-old son. A seasoned lucid dreamer, he also spends time exploring the intricate world of dream interpretation, reflecting his ever-curious and creative mind.


Leave a reply

You must be logged in to post a comment.