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 wrap setTimeout() method in a promise?
The setTimeout() method executes code or functions after a specified delay in milliseconds. When working with promises, you can wrap setTimeout() to create delayed asynchronous operations that resolve or reject after a specific time period.
In JavaScript, a promise is an object that represents the eventual completion of an asynchronous operation. Here, we will learn to resolve or reject promises after some delay using the setTimeout() method.
Basic Promise Without setTimeout()
First, let's see a basic promise that resolves immediately without any delay:
<html>
<body>
<h2>Using Promises without setTimeout() method</h2>
<div id="content"></div>
<br>
<button onclick="start()">Resolve Promise</button>
<script>
let content = document.getElementById('content');
function start() {
let promise = new Promise(function (resolve, reject) {
resolve("Promise is resolved!");
});
promise.then((value) => {
content.innerHTML = "The result from resolved promise is " + value;
});
}
</script>
</body>
</html>
Syntax
Here's the basic syntax to wrap setTimeout() inside a promise:
new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("Success message");
}, delay);
});
In this syntax, the resolve() method executes inside setTimeout() after the specified delay in milliseconds.
Using setTimeout() with async/await
This example demonstrates how to use setTimeout() with promises and async/await syntax:
<html>
<body>
<h3>Using Promises with setTimeout() and async functions</h3>
<div id="content"></div>
<br>
<button onclick="resolvePromise()">Resolve Promise</button>
<script>
let content = document.getElementById('content');
async function resolvePromise() {
let delayedPromise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("The operation completed successfully after 3 seconds.");
}, 3000);
});
let result = await delayedPromise;
content.innerHTML = "The resolved promise's result is " + result;
}
</script>
</body>
</html>
Using setTimeout() with then() Method
Instead of async/await, you can use the then() method to handle promise resolution:
<html>
<body>
<h2>Using Promises with setTimeout() and then() method</h2>
<div id="content"></div>
<br>
<button onclick="resolvePromise()">Resolve Promise</button>
<script>
let content = document.getElementById('content');
function resolvePromise() {
let promise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("This promise is resolved after 2000 milliseconds");
}, 2000);
});
promise.then(function (value) {
content.innerHTML = "The resolved promise's result is " + value;
});
}
</script>
</body>
</html>
Utility Function for Delayed Promises
You can create a reusable utility function that returns a promise with setTimeout():
<html>
<body>
<h2>Creating a Reusable Delay Function</h2>
<div id="output"></div>
<br>
<button onclick="testDelay()">Test Delay Function</button>
<script>
let output = document.getElementById('output');
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function testDelay() {
output.innerHTML = "Starting delay...";
await delay(2000);
output.innerHTML = "Delay completed after 2 seconds!";
}
</script>
</body>
</html>
Conclusion
Wrapping setTimeout() in promises allows you to create delayed asynchronous operations. Use async/await or then() methods to handle the resolved promises, enabling better control over timing in your JavaScript applications.
8K+ Views
