setTimeout Javascript

By /

setTimeout() is a method in JavaScript that allows to execute a piece of code after a certain interval of time. This means, what you want to perform through code after a certain delay of time, the setTimeout() method helps in it. You can think of the method as a way to set a timer to run JavaScript code at a certain time.

Syntax of setTimeout() Javascript method

setTimeout(function, delay, param1, param2, ...)

The first parameter is a function that will be called after the specified delay. The second parameter is the delay time in milliseconds. 1000 milliseconds is equal to 1 second. The optional parameters are the parameters that will be passed to the function when it is called.

Examples of setTimeout in JavaScript

setTimeout(function(){
    document.write("Hello World");
}, 3000);

Here in the above code, the setTimeout() method will call the anonymous function to display the message of ‘Hello World’ with a delay of 3 seconds.

Now, let’s create a simple container in HTML, CSS, and JavaScript that will change the color of the container after some delay using setTimeout() method.

<html>
<head>
</head>
<body>

<div id="examplecon" style="width:200px;height:50px;background-color:red;"></div>

<script>
setTimeout(function(){
document.getElementById("examplecon").style.background = "green";
}, 10000); 
</script>

</body>
</html>
Output:

The above code will change the color of the container from red to green after the interval of 10 seconds. Since, the count of the interval starts with the loading of the page, so to make this color change visible, you have to visit this section as soon as the page loads.

Not just color, you can also perform other things after the interval like changing the size of the container, writing something inside it etc.

setTimeout() with clearTimeout()

clearTimeout() method in JavaScript is used to clear the effect of the setTimeout() method. That means it is used to clear the time which is set by setTimeout. If you don’t want the execution of the code after the set interval, you can use this method. Let’s understand this by an example.

In the above example, we have created a container that changes its color after some interval. Now in this example, we will add a button. If you click the button, it will call clearTimeout() method and the color of the container will not change. And if you don’t click the button, the container will change color after the set interval as above.

<html>
<head>
</head>
<body>

<div id="examplecon" style="width:200px;height:50px;background-color:red;"></div>
<button id="examplebutton">Stop</button>

<script>
let c = setTimeout(function(){
document.getElementById("examplecon").style.background = "green";
}, 10000); 
document.getElementById("examplebutton").addEventListener("click", function(){
clearTimeout(c);
})
</script>

</body>
</html>
Output:

As you can notice if you click the stop button before 10 seconds, the setTimeout() method will be cleared by clearTimeout() method and the given function will not perform (color change).

setTimeout() method with setInterval() method

In JavaScript, the setInterval() method is used to repeat a certain block of codes at every given specified interval. The method continues the repetition until the window is closed or the clearInterval() method is called.

The syntax for this method is: setInterval(function, milliseconds)

Let’s build something using setTimeout() and setInterval() methods.

Here in this code, we have created a setTimeout function that will change the content of the container at every 1 second from A to E. At 0 sec. it will show A, at 1 sec. it will show B, at 2 sec. it will show C, at 3 sec. it will show D, and at 4 sec. it will show E. Finally at 5 sec. the whole function will be repeated from start by the setInterval function.

<html>
<head>
</head>
<body>

<div id="contentchange" style="width:60px;height:60px;background-color:#00cc66;border-radius:8px;color:white;font-size:30px;padding:10px;"></div>


<script>

const load = function(){
let chn = document.getElementById("contentchange")

setTimeout(function(){
chn.innerHTML = "A";
},0);
setTimeout(function(){
chn.innerHTML = "B";
},1000);
setTimeout(function(){
chn.innerHTML = "C";
},2000);
setTimeout(function(){
chn.innerHTML = "D";
},3000);
setTimeout(function(){
chn.innerHTML = "E";
},4000);
}
load();
setInterval(load,5000);


</script>

</body>
</html>
Output:

Related posts

JavaScript Confirm() Method
For Each Method Javascript
JavaScript Array slice()