首頁 > 文章 > web前端 > 如何將 setTimeout() 方法包裝在 Promise 中？

如何將 setTimeout() 方法包裝在 Promise 中？

WBOY轉載: 2023-08-27 23:29:051219瀏覽

如何将 setTimeout() 方法包装在 Promise 中？

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中文網其他相關文章！

JavaScript 构造函数回调函数对象 promise 异步

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何開發通用類別下一篇：如何開發通用類別

看更多