setTimeOut() 方法在特定的毫秒數後執行某些程式碼或函數。有時，我們需要在特定的延遲後解決或拒絕承諾，我們可以將 setTimeout() 方法與承諾一起使用。
在 JavaScript 中，promise 是一個傳回非同步操作結果的物件。在這裡，我們將學習使用 setTimeOut() 方法在延遲一段時間後解決或拒絕承諾。
範例 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()方法。它在「延遲」毫秒數後執行resolve()方法。
範例 2（具有非同步函數和 setTimeOut() 方法的 Promise）
在下面的範例中，我們建立了名為「resolvePromise」的非同步函數。我們創建了 Promise 並將其儲存在「sumPromise」變數中。在我們使用await關鍵字掛起函數執行直到promise解決之後。
使用者可以在輸出中觀察到，每當他們按下按鈕時，它都會在 2000 毫秒後解決承諾。
<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，而不是使用 async/await 語法，如範例 2 所示。我們也在 Promise 中使用了 setTimeOut()，如範例 2 所示，延遲一段時間後解決承諾。
<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。使用者可以觀察上述範例的輸出，它在特定毫秒後解決了承諾。
以上是如何將 setTimeout() 方法包裝在 Promise 中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
