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 wrap setTimeout() method in a promise?
The setTimeOut() method executes some block of code or functions after a particular number of milliseconds. Sometimes, we require to resolve or reject the promise after a particular delay, and we can use the setTimeout() method with the promises.
In JavaScript, a promise is an object that returns the result of the asynchronous operation. Here, we will learn to resolve or reject promises after some delay using the setTimeOut() method.
Example 1 (Promises without setTimeOut() method)
In the example below, we have used the Promise() constructor to create a new promise. The promise constructor takes a callback function as a parameter, and the callback function executes the resolve() method to resolve the promises. It demonstrates the basic use of the promise.
<html>
<body>
<h2>Using the Promises without setTimeOut() method in JavaScript</h2>
<div id = "content"> </div> <br />
<button onclick = "start()"> Resolve Promise </button>
<script>
let content = document.getElementById('content');
// function for promise example
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
Users can follow the syntax below to use the setTimeOut() method with promises.
new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, delay);
});
In the above syntax, we execute the resolve() method inside the setTimeOut() method. It executes the resolve() method after the ‘delay’ number of milliseconds.
Example 2 (Promises with async function and setTimeOut() method)
In the example below, we have created the asynchronous function named ‘resolvePromise’. We have created the promise and stored it in the ‘sumPromise’ variable. After we have used the await keyword to suspend the function execution until the promise gets resolved.
Users can observe in the output that whenever they press the button, it resolves the promise after 2000 milliseconds.
<html>
<body>
<h3>Using Promises with setTimeOut() method and async functions in JavaScript</h3>
<div id = "content"> </div> <br>
<button onclick = "resolvePromise()"> Resolve Promise </button>
<script>
let content = document.getElementById('content');
// function for promise example
async function resolvePromise() {
let sumPromise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("The sum of all data is 100.");
}, 3000);
});
let result = await sumPromise;
content.innerHTML = "The resolved promise's result is " + result;
}
</script>
</body>
</html>
Example 3 (Promises with then() block and setTimeout() method)
In the example below, we have used the then() block to resolve the promises rather than the async/await syntax, as in example 2. We have also used the setTimeOut() inside the promise, as in example 2, to resolve the promise after some delay.
<html>
<body>
<h2>Using the Promises with setTimeOut() method in JavaScript</h2>
<div id = "content"></div>
<br>
<button onclick = "resolvePromise()"> Resolve Promise </button>
<script>
let content = document.getElementById('content');
// function for promise example
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>
This tutorial taught users to wrap the setTimeOut() method in promises. Also, we have used the async/await syntax and then() block to resolve the promise. Users can observe the output of the above examples that it resolves the promises after particular milliseconds.
5K+ Views
