資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何將 setTimeout() 方法包裝在 Promise 中？
setTimeout() 方法在特定的毫秒數後執行一段程式碼或函式。有時，我們需要在特定的延遲後解析或拒絕 Promise，並且可以使用 setTimeout() 方法與 Promise 一起使用。
在 JavaScript 中，Promise 是一個返回非同步操作結果的物件。在這裡，我們將學習如何使用 setTimeout() 方法在延遲一段時間後解析或拒絕 Promise。
示例 1（沒有 setTimeout() 方法的 Promise）
在下面的示例中，我們使用了 Promise() 建構函式來建立一個新的 Promise。Promise 建構函式將回調函式作為引數，回撥函式執行 resolve() 方法來解析 Promise。它演示了 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>
語法
使用者可以按照以下語法在 Promise 中使用 setTimeout() 方法。
new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, delay);
});
在上面的語法中，我們在 setTimeout() 方法內部執行 resolve() 方法。它在 'delay' 毫秒數後執行 resolve() 方法。
示例 2（使用 async 函式和 setTimeout() 方法的 Promise）
在下面的示例中，我們建立了一個名為 'resolvePromise' 的非同步函式。我們建立了 Promise 並將其儲存在 'sumPromise' 變數中。之後，我們使用了 await 關鍵字來掛起函式執行，直到 Promise 解析完成。
使用者可以在輸出中觀察到，無論何時按下按鈕，它都會在 2000 毫秒後解析 Promise。
<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>
示例 3（使用 then() 塊和 setTimeout() 方法的 Promise）
在下面的示例中，我們使用了 then() 塊來解析 Promise，而不是像示例 2 中那樣使用 async/await 語法。我們還在 Promise 內部使用了 setTimeout()，就像示例 2 中一樣，以便在延遲一段時間後解析 Promise。
<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>
本教程教使用者如何將 setTimeout() 方法包裝在 Promise 中。此外，我們還使用了 async/await 語法和 then() 塊來解析 Promise。使用者可以觀察上述示例的輸出，它在特定的毫秒數後解析 Promise。
7K+ 瀏覽量
