Home > Article > Web Front-end > How to wrap setTimeout() method in Promise?
How to wrap setTimeout() method in Promise?
- WBOYforward
- 2023-08-27 23:29:051219browse
The setTimeOut() method executes some code or function after a specific number of milliseconds. Sometimes, we need to resolve or reject a promise after a specific delay, we can use the setTimeout() method with the promise.
In JavaScript, promise is an object that returns the result of an asynchronous operation. Here we will learn to use the setTimeOut() method to resolve or reject a promise after a delay.
Example 1 (Promise without setTimeOut() method)
In the following example, we use the Promise() constructor to create a new Promise. The Promise constructor accepts a callback function as a parameter, and the callback function executes the resolve() method to resolve the Promise. It demonstrates the basic usage of 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>
grammar
Users can use the setTimeOut() method with Promise according to the following syntax.
new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, delay);
});
In the above syntax, we execute the resolve() method in the setTimeOut() method. It executes the resolve() method after a "delay" of milliseconds.
Example 2 (Promise with async function and setTimeOut() method)
In the example below, we create an asynchronous function named "resolvePromise". We create the Promise and store it in the "sumPromise" variable. After we use the await keyword to suspend function execution until the promise is resolved.
The user 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 (Promise with then() block and setTimeout() method)
In the following example, we use a then() block to resolve the Promise instead of using async/await syntax, as shown in Example 2. We also use setTimeOut() in a Promise, as shown in Example 2, to resolve the promise after a 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 teaches users to wrap the setTimeOut() method in Promise. Additionally, we use async/await syntax and then() blocks to resolve Promise. Users can observe the output of the above example, which resolves the promise after a specific millisecond.
The above is the detailed content of How to wrap setTimeout() method in Promise?. For more information, please follow other related articles on the PHP Chinese website!