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 tell it to stop. One of this function is setTimeout that executes a method after a specified amount of time in milliseconds. As JavaScript do 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. As the first parameter, a function is called that has 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. On clicking the Click me button, function func() will be called that 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().If the function in the setTimeout has not already been executed, this method can stop the execution.
4.5 (7,471 ratings)
View Course
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:
In this program, a button “Click me” is created which calls the function func1() on clicking the button. In the function func1, setTimeout() is called with 3000 milliseconds as time and function that is defined within the method itself. A text “Please click the button “Click me” and see what happens after 3 seconds” is also displayed below the button. 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 #2
Javascript program to display a text after 3 seconds and stops execution 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. On clicking the Click me button, function func() will be called that displays a message after 3 seconds as shown below. 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:
Similar to 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 till 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, a button “TIMED TEXT” is created which calls the function func() on clicking the button. In the function, setTimeout() is called three times with a gap of 2000 milliseconds as time 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 in the textbox shown below.
After two seconds, timed text changes to 4 secs as shown below.
After two seconds, 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:
In this program, a button “Click here” is created which calls the function func() on clicking the button. On clicking the button, a new window gets opened. In the function, setTimeout() is called with 2000 milliseconds as time. On executing the code, it can be seen that a button with a certain text gets displayed. On clicking the button, a new window gets opened as shown below. After 2000 ms, the window that gets opened closes automatically.
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 does delay function work in javascript? along with a different example and its code implementation. You may also have a look at the following articles to learn more –
