Heim > Web-Frontend > js-Tutorial > Wie verwandelt man eine „setTimeout'-Funktion in ein Versprechen?

Wie verwandelt man eine „setTimeout'-Funktion in ein Versprechen?

Patricia Arquette

Freigeben： 2024-11-25 01:42:18

Original

180 Leute haben es durchsucht

So verwandeln Sie setTimeout in ein Versprechen

Die Aufgabe, ein Versprechen für eine Funktion zu erstellen, die nichts zurückgibt, wie z. B. setTimeout, kann anfangs eine Herausforderung sein. Um dieses Konzept zu verstehen, schauen wir uns ein modifiziertes Codebeispiel an:

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

Nach dem Login kopieren

}

async(function(){

console.log('async called back');

Nach dem Login kopieren

});

Unser Ziel ist es, ein Versprechen zu generieren, das async zurückgeben kann, sobald der setTimeout-Rückruf erfolgt bereit.

Basic Delay with Promise

Mithilfe nativer Versprechen können wir eine Funktion erstellen, die später wie folgt aufgerufen wird:

 <br>Funktion später (Verzögerung) {</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);
});

Nach dem Login kopieren

}

Diese Funktion benötigt eine Verzögerung in Millisekunden und gibt ein Versprechen zurück, das nach Ablauf der Verzögerung aufgelöst wird.

< ;h3>Grundlegende Verzögerung mit Wert

Um es später zu ändern und passieren zu lassen Um einen Auflösungswert anzugeben, müssen wir sicherstellen, dass der setTimeout-Callback den Wert als Argument erhält. Für Browser, die die Bereitstellung zusätzlicher Argumente für setTimeout unterstützen, kann der folgende Code verwendet werden:

<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);
});

Nach dem Login kopieren

}

Dieser Code stellt sicher, dass der Wert an den Rückruf übergeben und anschließend vom aufgelöst wird Versprechen.

Abbrechbare Verzögerung mit Wert

Für Fälle, in denen wir die Möglichkeit bieten möchten, die Zeitüberschreitung abzubrechen, können wir ein Objekt mit einer Abbruchmethode erstellen und ein Accessor für das Versprechen. Wenn die Abbruchmethode aufgerufen wird, löscht sie die Zeitüberschreitung und lehnt das Versprechen ab:

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