Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to delay a JavaScript function call using JavaScript?
In this tutorial, we are going to learn how can we delay a function in JavaScript. Whenever we want to call a function after a specified amount of time than we use the delay function in JavaScript.
To provide delay in JavaScript function we use a global window object named as setTimeout(). This function allows us to provide a specific delay before executing a function.
Let’s deep down into some of the functionalities, syntax and many other things of setTimeout() function. The setTimeout() method mainly require two one is the function which we need to execute with some delay and the other argument is the time for which we want to delay the function.
Syntax
Syntax to delay a function in JavaScript is given as −
When function declared inside the setTimeout() method:
setTimeout ( function(){function_body}, time in milliseconds);
or
When function declared outside setTimeout() method:
function function_name();
setTimeout(function_name, time i
n milliseconds);
As the function declared in the setTimeout() method is anonymous so we can also remove the function keyword and replace it with the arrow function like shown below −
setTimeout(()=>{function_body}, time in milliseconds);
Let's look into some examples of the setTimeout() function −
Example 1: Defining the function i nside the setTimeout() Method
Steps to delay a function declared inside setTimeout() function −
Declare a setTimeout() function.
Inside it define an arrow function with its function body.
Declare another parameter as 3000 which is providing a 3 second delay in calling the function after execution.
We can use the below code to perform above task −
<!DOCTYPE html>
<html>
<body>
<h2>Tutorials Point</h2>
<p> Delaying a function in JavaScript </p>
<p> Wait for 3 seconds to get response </p>
<p id="result"></p>
<script>
setTimeout(()=> {
document.getElementById("result").innerHTML = "Hello, I am here";
}
,3000);
</script>
</body>
</html>
Example 2: Defining the function outside the setTimeout() method
Steps to delay a function declared outside setTimeout() function and then later called inside it −
Define a function named a message with its body written inside it.
Declare a setTimeout() function
Inside it calls the message function.
Declare another parameter as 3000 which is providing a 3-second delay in calling the function after execution.
We can use the below code to perform above task −
<!DOCTYPE html>
<html>
<body>
<h2>Tutorials Point</h2>
<p> Delaying a function in JavaScript </p>
<p> Wait for 3 seconds to get response </p>
<p id="result"></p>
<script>
function message() {
document.getElementById("result").innerHTML = "Hello, I am here";
}
setTimeout(message,3000);
</script>
</body>
</html>
Example 3 : Defining the function outside the setTimeout() m ethod with some arguments in it
Steps to delay a function with arguments declared outside setTimeout() function and then later called inside it −
Define a function named as a message with 2 parameters and its body.
Declare a setTimeout() function.
Inside it calls the message function as the first argument.
Declare another parameter as 3000 which is providing a 3-second delay in calling the function after execution.
After the two arguments we have to declare two more arguments which are the values provided to the parameters declared in the function message.
We can use the below HTML code to perform the above task −
<!DOCTYPE html>
<html>
<body>
<h2>Tutorials Point</h2>
<p> Delaying a function in JavaScript </p>
<p> Wait for 3 seconds to get response </p>
<p id="result"></p>
<script>
function message(a,b) {
let sum=a+b;
document.getElementById("result").innerHTML = "The sum of the two values is "+ sum;
}
setTimeout(message,3000,6,8);
</script>
</body>
</html>
From the above examples we got to learn that the setTimeout() takes two values as arguments if the function over which delay is applied doesn’t contain any arguments otherwise setTimeout() takes more than two arguments. We can use this delay method according to our requirements like if we want to show an alert after some seconds o we can also put a timer than we can execute it using this method.
Note − We can also cancel the delay by calling the clearTimeout() function and providing the timeout ID inside it. The timeout ID we get as the return value from the setTimeout() function.
89K+ Views
To Continue Learning Please Login