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);

Example:

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() {
document.body.style.backgroundColor = "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() {
clearTimeout(changeBg);
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);

Example:

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;

circle.style.width = circleWidth + 'px';
circle.style.height = circleHeight + 'px';
circle.style.transition = "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() {
clearInterval(animation);
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);