Updated June 16, 2023
Introduction to JavaScript setTimeout
setTimeout() is a method in JavaScript that is used to delay the function or output for a particular instance of time. setTimeout() is part of the scheduling time concept.
Example: Cricbuzz website, you can see the page is automatically refreshed after every 2 seconds even if we are not refreshing the page. In this case, the used setTimeout() method was to make it refresh after every 2 seconds while the match is going on. If you want to design the countdown button, we must use the setTimeout() method for every 1 second.
How does setTimemethod() Work in JavaScript?
setTimemethod() is working without any instance. This means we can directly pass the method like setTimemethod();
Syntax #1
setTimeout(function,delay);Syntax #2
setTimeout(function,delay,argument1,argument2,….);- function: We can pass any predefined function or user-defined function.
- delay: Mention time, how much time we want the delay to execute the function. Delay always has taken in milliseconds. For example, if we want 2 seconds to delay, we must pass 2000 as a value to get 2 seconds.
- argument1,argument2: We can even pass arguments with the method.
Examples to Implement JavaScript setTimeout
Below are the examples of implementing in JavaScript setTimeout:
Example #1 – Print name with every 5 seconds delay
Code:
<html>
<body>
<font color="green">
<h1>Name with 5 seconds delay</h1>
</font>
<script>
function getNameDelay() {
timeDelay=setTimeout(printMyName, 5000);
}
function printMyName() {
document.write("I am Amardeep"+"<br>");
}
getNameDelay();
</script>
</body>
</html>Output before delay:
Output after delay:
Explanation of the above code: printMyName() has text we need to print. Delay the function for 5 seconds is mentioned in the getNameDelay() function with the setTimeout() method within it. After 5 seconds getNameDelay() function gives I am Amardeep.
Example #2 – Alert box display after 3 seconds delay after pressing a button
Code:
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1>Alert box with 3 seconds delay</h1>
</font>
<script>
function getAlertBoxDelay()
{
setTimeout(myAlertBox, 3000);
}
function myAlertBox()
{
alert("Hi! This is Parameshwar");
}
</script>
<button onClick="getAlertBoxDelay()">Get Alert Box</button>
</body>
</html>Output before delay:
Output after delay:
Explanation of the above code: myAlertBox() method has to get an alert box pop-up code. Once click on the Get Alert Box button, the onClick attribute is called the getAlertBoxDelay(). It will display an alert box with Hi! This is Parameshwar message after 5 seconds delay.
Example #3 – setTimeout() method with function, delay, and arguments
Code:
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1>Settimeout with function, delay, arguments</h1>
</font>
<script>
function getArgsDelay()
{
setTimeout(getMyArgs, 5000,"Paramesh","Amardeep");
}
function getMyArgs(firstArg,secondArg)
{
alert("First person name is :"+firstArg+"\n"+"Second person name is :"+secondArg);
}
</script>
<button onClick="getArgsDelay()">Get My Arguments</button>
</body>
</html>Output before delay:
Output after delay:
Explanation th the above code: the getMyArgs () method has to get an alert box pop-up code. Clicking on the “Get My Arguments” button triggers the onClick attribute, which invokes the function getArgsDelay(). This function displays an alert box output after a delay of 5 seconds.
Example #4 – setTimeout() method without function and delay
Syntax:
setTimeout("Any String",delay);Code:
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1>Delay Example wihthout function("Direct string passing")</h1>
</font>
<script>
function delayFun() {
setTimeout("alert('I am without Function')", 5000)
}
delayFun();
</script>
</body>
</html>Output before delay:
Output after delay:
Explanation of the above code: Ensure direct String passing into the setTimeout() method is not recommended. It is not meet standard coding criteria. So, instead of string passing, you can use an anonymous function inside setTimeout()
Syntax of Anonymous function inside setTimeout() method
setTimeout(function (){ //code},delay);- function (){ //code}: We can pass the anonymous function inside the setTimeout(). It is a hard way to write the code.
- In both cases passing string and anonymous function gives the same output.
Explanation of the above code:
delayFun() method has setTimeout() with string as function and delay of 5 seconds. After 5 seconds, a pop-up box displays a message stating, “I is without function” without any functionality.
Conclusion
setTimeout() method can work with function, delay, and also work with function, delay, and arguments. The primary purpose of setTimeout is to hibernate or sleep the function for a certain amount of time.
Recommended Articles
This is a guide to JavaScript setTimeout. Here we discuss an introduction, how JavaScript setTimeout works, and the examples to implement with proper codes and outputs. You can also go through our other related articles to learn more –
