Maison >interface Web >js tutoriel >Comment créer et gérer des promesses à l'aide de setTimeout en JavaScript ?

Comment créer et gérer des promesses à l'aide de setTimeout en JavaScript ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-06 00:27:11711parcourir

How to Create and Manage Promises Using setTimeout in JavaScript?

Comment créer une promesse à partir de setTimeout

Créer une promesse de base pour setTimeout

Pour créer une promesse que l'async peut revenir après setTimeout le rappel se déclenche, nous pouvons envelopper la fonction setTimeout dans un constructeur de promesse, comme le montre l'extrait ci-dessous :

<br>function setTimeoutReturnPromise(delay) {<br> return new Promise((resolve) => {</p>
<pre class="brush:php;toolbar:false">setTimeout(resolve, delay);

});
}

Cette fonction prend un délai comme argument et renvoie une promesse. La promesse sera résolue une fois le délai spécifié écoulé et le rappel de la fonction setTimeout sera exécuté.

Utiliser la promesse avec async

Maintenant, notre fonction asynchrone peut utiliser la fonction setTimeoutReturnPromise pour créer une promesse qu'elle peut renvoyer. Cela nous permet d'utiliser la méthode then() pour exécuter du code après l'appel du rappel setTimeout :

<br>async(function() {<br> setTimeoutReturnPromise(5000).then( () => {</p>
<pre class="brush:php;toolbar:false">console.log("async called back");

});
});

Mise à jour pour ES2015 et au-delà

Depuis l'introduction d'ES2015 et du JavaScript moderne, les promesses sont devenues des fonctionnalités intégrées. La syntaxe a été simplifiée, comme indiqué ci-dessous :

<br>function later(delay) {<br> return new Promise((resolve) => {</p>
<pre class="brush:php;toolbar:false">setTimeout(resolve, delay);

});
}

Utilisation de la flèche fonctions et arguments de valeur de résolution facultatifs, le code peut être encore condensé :

<br>const later = (délai, valeur) => new Promise(resolve => setTimeout(resolve, delay, value));<br>

Promesses annulables (facultatif)

Si vous désirez annuler le délai d'attente, vous pouvez retourner un objet avec une promesse et une annulation méthode :

<br>const later = (délai, valeur) => {<br> let timer = 0;<br> let rejet = null;<br> const promise = new Promise((resolve, _reject) => {</p>
<pre class="brush:php;toolbar:false">reject = _reject;
timer = setTimeout(resolve, delay, value);

});
retour {

get promise() { return promise; },
cancel() {
  if (timer) {
    clearTimeout(timer);
    timer = 0;
    reject();
    reject = null;
  }
}

};
};

Cette approche vous permet d'annuler le délai d'attente et de rejeter la promesse à l'aide de la méthode Cancel().

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn