Introduction to JavaScript setTimeout
setTimeout() is a method in JavaScript, which 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 page is automatically refreshed after every 2 seconds even we are not refreshing the page. In this case, the used setTimeout() method 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. 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 value to get 2 seconds.
- argument1,argument2: We can even pass arguments with the method.
Examples to Implement JavaScript setTimeout
Below are the examples to implement 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 to the above code: printMyName() has text which we need to print. Delay the function for 5 seconds are mentioned in the getNameDelay() function with 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 to the above code: myAlertBox() method has to get an alert box pop up code. Once click on Get Alert Box button, onClick attribute 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: getMyArgs () method has to get an alert box pop up code. Once click on Get My Arguments button, onClick attribute called the getArgsDelay() It will display alert box output after 5 seconds delay.
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 to the above code: Make sure 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 anonymous function inside setTimeout()
Syntax of Anonymous function inside setTimeout() method
setTimeout(function (){ //code},delay);- function (){ //code}: We can pass 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 to the above code:
delayFun() method has setTimeout() with string as function and delay of 5 seconds. After 5 seconds a popup box with I is without function message displayed.
Conclusion
setTimeout() method can be work with function, delay and also work with function, delay, and arguments. The main purpose of setTimeout is to hibernate or sleep the function for a certain amount of time.