Maison > interface Web > js tutoriel > Comment transformer une fonction « setTimeout » en promesse ?

Comment transformer une fonction « setTimeout » en promesse ?

Patricia Arquette

Libérer： 2024-11-25 01:42:18

original

182 Les gens l'ont consulté

Comment transformer setTimeout en promesse

La tâche de créer une promesse pour une fonction qui ne renvoie rien, comme setTimeout, peut être difficile au début. Pour comprendre ce concept, référons-nous à un exemple de code modifié :

<br>fonction async(callback){</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">setTimeout(function(){
    callback();
}, 5000);

Copier après la connexion

}

async(function(){

console.log('async called back');

Copier après la connexion

});

Notre objectif est de générer une promesse que async pourra renvoyer une fois le rappel setTimeout terminé. prêt.

Basic Delay with Promise

En utilisant des promesses natives, nous pouvons créer une fonction appelée plus tard comme suit :

 <br>fonctionne plus tard (délai) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return new Promise(function(resolve) {
    setTimeout(resolve, delay);
});

Copier après la connexion

}

Cette fonction prend un délai en millisecondes et renvoie une promesse qui se résout après l'expiration du délai.

< ;h3>Délai de base avec valeur

Pour le modifier plus tard et l'autoriser pour transmettre une valeur de résolution, nous devons nous assurer que le rappel setTimeout reçoit la valeur en tant qu'argument. Pour les navigateurs prenant en charge la fourniture d'arguments supplémentaires à setTimeout, le code suivant peut être utilisé :

<br>function later(delay, value) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return new Promise(function(resolve) {
    setTimeout(resolve, delay, value);
});

Copier après la connexion

}

Ce code garantit que la valeur est transmise au rappel et ensuite résolue par le promesse.

Délai annulable avec valeur

Pour les cas où nous souhaitons offrir la possibilité d'annuler le délai d'attente, nous pouvons créer un objet avec une méthode d'annulation et un accesseur à la promesse. Lorsque la méthode Cancel est appelée, elle efface le délai d'attente et rejette la promesse :

<br>const later = (delay, value) => {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let timer = 0;
let reject = null;
const promise = new Promise((resolve, _reject) => {
    reject = _reject;
    timer = setTimeout(resolve, delay, value);
});
return {
    get promise() { return promise; },
    cancel() {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
            reject();
            reject = null;
        }
    }
};