JavaScript 如何将setTimeout()方法包裹在一个Promise中

setTimeOut()方法在一个特定的毫秒数后执行一些代码块或函数。有时，我们要求在一个特定的延迟后解决或拒绝Promise，我们可以在Promise中使用setTimeout（）方法。

在JavaScript中，一个Promise是一个返回异步操作结果的对象。在这里，我们将学习使用setTimeOut()方法来解决或拒绝延迟后的Promise。

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

在下面的例子中，我们使用了Promise()构造函数来创建一个新的Promise。诺言构造函数将一个回调函数作为参数，回调函数执行 resolve() 方法来解析诺言。它演示了诺言的基本用途。

<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毫秒后解决了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。