如何将 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。

更新于: 2023年2月28日

7K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告

© . All rights reserved.