Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
The setTimeout() method mainly requires two arguments: the function which we need to execute with some delay and the time (in milliseconds) for which we want to delay the function.
Syntax
There are multiple ways to use setTimeout() for delaying function execution:
// Function declared inside setTimeout()
setTimeout(function() {
// function body
}, timeInMilliseconds);
// Arrow function syntax
setTimeout(() => {
// function body
}, timeInMilliseconds);
// External function reference
setTimeout(functionName, timeInMilliseconds);
// External function with parameters
setTimeout(functionName, timeInMilliseconds, arg1, arg2, ...);
Example 1: Function Defined Inside setTimeout()
This approach defines the function directly inside the setTimeout() method using arrow function syntax:
<!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 after 3 seconds!";
}, 3000);
</script>
</body>
</html>
Example 2: External Function Reference
Here we define the function separately and then reference it in setTimeout():
<!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 displayMessage() {
document.getElementById("result").innerHTML = "Hello, I am here after 3 seconds!";
}
setTimeout(displayMessage, 3000);
</script>
</body>
</html>
Example 3: Function with Parameters
When your function requires parameters, pass them as additional arguments to setTimeout():
<!DOCTYPE html>
<html>
<body>
<h2>Tutorials Point</h2>
<p>Delaying a function with parameters in JavaScript</p>
<p>Wait for 3 seconds to see the calculation</p>
<p id="result"></p>
<script>
function calculateSum(a, b) {
let sum = a + b;
document.getElementById("result").innerHTML = "The sum of " + a + " and " + b + " is " + sum;
}
setTimeout(calculateSum, 3000, 6, 8);
</script>
</body>
</html>
Canceling Delayed Execution
You can cancel a delayed function call using clearTimeout() with the timeout ID:
<!DOCTYPE html>
<html>
<body>
<h2>Tutorials Point</h2>
<p>Cancel delayed function execution</p>
<button onclick="startTimer()">Start Timer</button>
<button onclick="cancelTimer()">Cancel Timer</button>
<p id="result"></p>
<script>
let timeoutId;
function startTimer() {
timeoutId = setTimeout(() => {
document.getElementById("result").innerHTML = "Timer executed!";
}, 3000);
document.getElementById("result").innerHTML = "Timer started, will execute in 3 seconds...";
}
function cancelTimer() {
clearTimeout(timeoutId);
document.getElementById("result").innerHTML = "Timer cancelled!";
}
</script>
</body>
</html>
Key Points
-
setTimeout()is asynchronous - it doesn't block code execution - Time is specified in milliseconds (1000ms = 1 second)
- Returns a timeout ID that can be used with
clearTimeout() - Additional parameters after the delay are passed to the delayed function
Conclusion
setTimeout() is the standard way to delay function execution in JavaScript. Use it for timed operations, animations, or user experience enhancements where delayed responses are needed.
97K+ Views
