Maison > Article > interface Web > Comment envelopper la méthode setTimeout() dans Promise ?

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

WBOYavant: 2023-08-27 23:29:051258parcourir

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>

Grammaire

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

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

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>

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>

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!

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

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment développer des classes génériquesArticle suivant：Comment développer des classes génériques

Articles Liés

Voir plus