Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Use setTimeout Function in JavaScript
The setTimeout() function is provided by the window object, which calls the specified JavaScript function after the specified time only. This function will be called just once after waiting for the timeout set by the user.
It is similar to an alarm or reminder functionality. In the same way, we set up the timeout for the desired time period after which this function is called. This method is used where we are required to add a delay in the execution of a function. This method can also be used for animations or DOM manipulations in JQuert.
The input set up in the setTimeoutsetTimeout() function should be in milliseconds.
Syntax
setTimeout(function, milliseconds, param1, param2, ....)
Parameters
function − This is the desired function that needs to be executed after the desired time period.This is the desired function that needs to be executed after the desired time period.
Milliseconds − This represents the delay time in milliseconds.
param1, param2 − These are the optional parameters if required.
Return
A number is returned that contains the id of the timer. We can use this id with clearTimeout(id) to cancel the timer.
Example 1
In the below example, we have created a simple alert that is displaying some custom message. This message will be shown by the alert box when clicked. But since we have added the timeout in the button. The alert will only be executed after the specified time duration, which is 2 seconds in the below code example
#Filename: index.html
<!DOCTYPE html>
<html>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<h2>The setTimeout() Method</h2>
<p>Click the following button. Wait 2 seconds for alert "Hello".</p>
<button onclick="myFunction()">Try it</button>
<script>
let timeout;
function myFunction() {
timeout = setTimeout(alertFunc, 2000);
}
function alertFunc() {
alert("Hello User... Start Learning now!");
}
</script>
</body>
</html>
Output
When you click the "Try it" button, after 2 seconds an alert box will pop up showing the message.
Example 2
In the example below, we display the parameters passed to the myFunct() method after a time out of 3 seconds.
#Filename: index.html
<!DOCTYPE html>
<html>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<h2>setTimeout() Method</h2>
<p>In this example, we display the parameters passed to
myFunc()</p>
<div style="border: 2px solid black;">
<p id="demo"></p>
</div>
<script>
setTimeout(myFunc, 3000, "param1", "param2");
function myFunc(p1, p2) {
document.getElementById("demo").innerHTML = "Parameters: " + p1
+ " " + p2;
}
</script>
</body>
</html>
Output
When you execute the above program it will display the parameters passed to the myFunc() method.
4K+ Views
