如何将 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 中？的详细内容，更多请关注编程之家其它相关文章！

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

示例 1（没有 setTimeOut() 方法的 Promise）

语法

示例 2（带有异步函数和 setTimeOut() 方法的 Promise）

示例 3（带有 then() 块和 setTimeout() 方法的 Promise）

相关推荐