Comment envelopper la méthode setTimeout() dans Promise ?-js tutoriel-php.cn

Comment envelopper la méthode setTimeout() dans Promise ?

WBOY

Libérer： 2023-08-27 23:29:05

avant

1239 Les gens l'ont consulté

La méthode

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

setTimeOut() exécute du code ou une fonction après un nombre spécifique de millisecondes. Parfois, nous devons résoudre ou rejeter une promesse après un délai spécifique, nous pouvons utiliser la méthode setTimeout() avec la promesse.

En JavaScript, une promesse est un objet qui renvoie le résultat d'une opération asynchrone. Ici, nous allons apprendre à utiliser la méthode setTimeOut() pour résoudre ou rejeter une promesse après un délai.

Exemple 1 (Promesse sans méthode setTimeOut())

Dans l'exemple ci-dessous, nous utilisons le constructeur Promise() pour créer une nouvelle Promise. Le constructeur Promise accepte une fonction de rappel comme paramètre et la fonction de rappel exécute la méthode solve() pour résoudre la promesse. Il démontre l’utilisation de base de 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>

Copier après la connexion

Grammaire

Les utilisateurs peuvent utiliser la méthode setTimeOut() avec Promise selon la syntaxe suivante.

new Promise(function (resolve, reject) {
   setTimeout(function () {
      resolve();
   }, delay);
});

Copier après la connexion

Dans la syntaxe ci-dessus, nous exécutons la méthode solve() dans la méthode setTimeOut(). Il exécute la méthode solve() après un « délai » de millisecondes.

Exemple 2 (Promesse avec fonction asynchrone et méthode setTimeOut())

Dans l'exemple ci-dessous, nous avons créé une fonction asynchrone nommée "resolvePromise". Nous créons la promesse et la stockons dans la variable "sumPromise". Après, nous utilisons le mot-clé wait pour suspendre l'exécution de la fonction jusqu'à ce que la promesse soit résolue.

L'utilisateur peut observer dans le résultat que chaque fois qu'il appuie sur le bouton, la promesse est résolue après 2 000 millisecondes.

<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>

Copier après la connexion

Exemple 3 (Promesse avec le bloc then() et la méthode setTimeout())

Dans l'exemple ci-dessous, nous utilisons un bloc then() pour résoudre Promise au lieu d'utiliser la syntaxe async/await comme indiqué dans l'exemple 2. Nous utilisons également setTimeOut() dans une promesse, comme le montre l'exemple 2, pour résoudre la promesse après un délai.

<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>

Copier après la connexion

Ce tutoriel apprend aux utilisateurs à envelopper la méthode setTimeOut() dans une promesse. De plus, nous utilisons la syntaxe async/wait et les blocs then() pour résoudre Promise. Les utilisateurs peuvent observer le résultat de l'exemple ci-dessus, qui résout la promesse après une milliseconde spécifique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!