Updated June 22, 2023
Definition of JavaScript Delay
For a long period, the web platform provides JavaScript programmers a lot of functions that permit them to execute code asynchronously after a specific time interval has lapsed and to recurrently execute a set of code asynchronously till the user tells it to stop. One of these functions is setTimeout which executes a method after a specified amount of time in milliseconds. As JavaScript does not provide any wait command to permit a delay to the loops, this method is very helpful. JavaScript can initiate an action or repeat it after a specified interval.
Syntax:
Below is the syntax of setTimeout function that provides a delay.
setTimeout(fn_name, ms, a1, a2, a3...)Parameters:
- fn_name: Name of the function that has to be executed.
- ms: Number of milliseconds.
- a1, a2, a3: Arguments that are passed to the function.
How does Delay Function Work in JavaScript?
As already mentioned, setTimeout() has different parameters. The first parameter of setTimeout() is a function that needs to be executed when setTimeout() is called. The second parameter is the amount of time in milliseconds. Let us see an example.
<button onclick="variable = setTimeout(func, 3000)">Click me</button>
<button onclick="clearTimeout(variable)">Stop execution</button>
<script>
function func() {
alert("This message is displayed after 3 seconds!");}Here, two buttons are present. Click me and Stop execution. Clicking the “Click me” button triggers the execution of the func() function, which displays a message after 3 seconds.
At the same time, on clicking the button Stop execution, clearTimeout will be called. The clearTimeout() method stops the function execution mentioned in setTimeout().
Examples of JavaScript Delay
Let us see some sample programs on the setTimeout function.
Example #1
Javascript program to display a text after 3 seconds that defines the function inside the setTimeout.
Code:
<!DOCTYPE html>
<html>
<body>
<button onclick="func1()">Click me</button>
<script>
function func1() {
setTimeout(function(){ alert("This message is displayed after 3 seconds!"); }, 3000);
}
</script>
<p>Please click the button "Click me" and see what happens after 3 seconds.</p>
</body>
</html>Output:
This program features a button labeled “Click me” that triggers the func1() function when clicked. The function func1() employs the setTimeout() method with a delay of 3000 milliseconds and an embedded function. Furthermore, it displays the text “Please click the button ‘Click me’ and observe the outcome after 3 seconds” below the button. Upon executing the code, you will observe the appearance of a button with the specified text.
Example #2
In this JavaScript program, a text is displayed after 3 seconds, and the execution is stopped if the button is clicked before 3 seconds.
Code:
<!DOCTYPE html>
<html>
<body>
<button onclick="variabl = setTimeout(func, 3000)">Click me</button>
<button onclick="clearTimeout(variabl)">Stop execution</button>
<p>Please click the button "Click me" and see what happens after 3 seconds.</p>
<p>Try to stop the function execution by clicking the stop button before completing 3 seconds.</p>
<script>
function func() {
alert("This message is displayed after 3 seconds!");
}
</script>
</body>
</html>Output:
In this program, two buttons are present. Click me and Stop execution. When you click the “Click me” button, the function func() will be called, which displays a message after 3 seconds. Here’s an example: Similarly, on clicking the button Stop execution, clearTimeout will be called.
Example #3
Javascript program to display a text after 3 seconds.
Code:
<!DOCTYPE html>
<html>
<body>
<button onclick="variabl = setTimeout(func, 3000)">Click me</button>
<p>Please click the button "Click me" and see what happens after 3 seconds.</p>
<script>
function func() {
alert("This message is displayed after 3 seconds!");
}
</script>
</body>
</html>Output:
Like program 1, a button “Click me” is created, which calls the function func1() on clicking the button. The difference is that the function is defined separately. On executing the code, it can be seen that a button with a certain text gets displayed. On clicking the button, a message gets displayed, as shown below.
Example #4
Javascript program to display a timed text every 2 seconds to 6 seconds.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Please click the button "TIMED TEXT" and see what happens after every two seconds.</p>
<button onclick="func()">TIMED TEXT</button>
<input type="text" id="textt">
<script>
function func() {
var v = document.getElementById("textt");
setTimeout(function(){ v.value="2 secs" }, 2000);
setTimeout(function(){ v.value="4 secs" }, 4000);
setTimeout(function(){ v.value="6 secs" }, 6000);
}
</script>
</body>
</html>Output:
In this program, we create a button labeled “TIMED TEXT” that triggers the func() function when it is clicked. Inside the func() function, we call the setTimeout() method three times with a delay of 2000 milliseconds between each invocation. On executing the code, it can be seen that a button with a certain text gets displayed. On clicking the button, a message is displayed in the textbox below.
After two seconds, the timed text changes to 4 secs, as shown below.
After two seconds, the timed text changes to 4 secs, as shown below.
Example #5
Javascript program to open a window after clicking a button.
Code:
<!DOCTYPE html>
<html>
<body>
<p> Open a new window by clicking the button. . .</p>
<button onclick="func()"> Click here </button>
<script>
function func() {
var v = window.open("", "v", "width=500, height=250");
v.document.write("<p> New window </p>");
setTimeout(function(){ v.close() }, 2000);
}
</script>
</body>
</html>Output:
When you click the button, it opens a new window. Inside the func() function, it sets a delay of 2000 milliseconds using the setTimeout() method. After executing the code, it displays a button with the specified text. When you click the button, it opens a new window, and after a delay of 2000 milliseconds, the opened window automatically closes.
Conclusion
In Javascript, setTimeoutis a function that executes a method after a specified amount of time in milliseconds. JavaScript can initiate an action or repeat it after a specified interval. In this article, the setTimeout function is explained in detail with syntax, working, and examples.
Recommended Articles
This is a guide to JavaScript Delay. Here we also discuss the introduction and how delay function works in javascript. along with a different example and its code implementation. You may also have a look at the following articles to learn more –
