Was bedeutet setTimeout(..., ) in JavaScript wirklich? (Ereignisschleife erklärt!)

Was bedeutet setTimeout(..., 0ms) in JavaScript wirklich? (Ereignisschleife erklärt!)

Okay, lasst uns diese ganze setTimeout-Sache mit 0 ms aufschlüsseln. Auf den ersten Blick würde man denken: „Bro, 0 ms bedeutet, dass es sofort ausgeführt wird, oder?“ Aber JavaScript hat seine eigene Ausstrahlung und 0 ms ist nicht so augenblicklich, wie man es erwarten würde. Lassen Sie uns das gemeinsam herausfinden.

Der Kodex:

Hier ist der Code, den wir analysieren:

const promise = new Promise((resolve, reject) => {
  console.log(1); 
  setTimeout(() => { 
    console.log("timerStart");
    resolve("success"); 
    console.log("timerEnd");
  }, 0); 
  console.log(2); 
});

promise.then((res) => {
  console.log(res); 
})

console.log(4);

Und die Ausgabe?

1  
2  
4  
timerStart  
success  
timerEnd  

Die große Frage: Was passiert mit 0 ms?

Wenn Sie setTimeout(() => { ... }, 0) sehen, hat es das Gefühl, dass der darin enthaltene Code sofort nach 0 ms ausgeführt wird. Aber nein, JavaScript sagt: „Bruder, ich habe mein eigenes System, warte, bis du dran bist!“

JavaScript-System: Ereignisschleife

JavaScript führt Code nicht nur direkt aus – es verfügt über ein cooles System namens Ereignisschleife zur Verarbeitung von Aufgaben. Stellen Sie sich das so vor:

1. Hauptaufgaben (synchron):
   
   Dinge wie console.log() werden zuerst ausgeführt. Dies sind die direkten, direkten Aufgaben.

2. Mikroaufgaben (Versprechen):
   
   Als nächstes kommen Versprechen, noch vor den Timern. Es ist, als hätten sie ein VIP-Ticket.

3. Aufgabenwarteschlange (Timer wie setTimeout):
   
   Timer rücken in die hintere Reihe und laufen erst, nachdem die Mikroaufgaben erledigt sind. Selbst wenn Sie ihm 0 ms geben, wartet es.

Den Code aufschlüsseln

Lassen Sie uns Schritt für Schritt sehen, was passiert:

1. Versprechen erstellt:

   • console.log(1) wird sofort ausgeführt.
   • setTimeout(() => { ... }, 0) wird zur Aufgabenwarteschlange hinzugefügt.
   • console.log(2) wird sofort ausgeführt.

2. Promise .then():

   • Der .then()-Rückruf wird zur Mikrotask-Warteschlange hinzugefügt.

3. console.log(4):

   • Wird direkt ausgeführt, da es Teil des Hauptskripts ist.

4. Microtask Runs (VIP):

   • Das Versprechen wird aufgelöst, sodass der .then()-Rückruf „Erfolg“ protokolliert.

5. Aufgabenwarteschlangenläufe:

   • Der setTimeout-Callback ist endlich an der Reihe: protokolliert „timerStart“ und „timerEnd“.

Warum bedeutet 0 ms nicht „Jetzt sofort“?

Auch wenn Sie 0 ms angegeben haben, wird setTimeout immer verzögert. JavaScript schiebt es in die Aufgabenwarteschlange, egal was passiert. Das System löscht zunächst alle synchronen Aufgaben und Mikroaufgaben (Versprechen), bevor es die Aufgabenwarteschlange berührt.

Also, in einfachen Worten:

Bei 0 ms geht es nicht um die Zeit – es geht darum, darauf zu warten, bis man an der Reihe ist.

Stellen Sie es sich so vor

Stellen Sie sich vor, Sie stehen in der Warteschlange für eine Achterbahnfahrt:

1. Synchroncode: Personen, die Fast-Track-Tickets gekauft haben – sie sind die Ersten, keine Debatte.
2. Versprechen: Leute mit VIP-Pässen – sie sind die nächsten in der Reihe, auch wenn sie zu spät kommen.
3. Timer (wie setTimeout): Normale Leute ohne Ausweise. Selbst wenn Sie ihnen sagen: „0 ms warten“, müssen sie immer noch in der regulären Warteschlange stehen.

Abschließende Zusammenfassung der Ausgabe

Hier ist die Reihenfolge der Ereignisse in unserem Code:

1. console.log(1) (synchron)
2. console.log(2) (synchron)
3. console.log(4) (synchron)
4. „Erfolg“ aus der .then() (Microtask)
5. console.log("timerStart") (Aufgabenwarteschlange)
6. console.log("timerEnd") (Aufgabenwarteschlange)

Warum ist das wichtig?

Wenn Sie verstehen, wie 0 ms wirklich funktionieren, können Sie besseren asynchronen Code schreiben. Es ist auch ein cooler Trick, ihn Ihren Freunden zu erklären, wenn sie zufällige Verzögerungen in ihrem JavaScript beheben.

Wenn Sie also das nächste Mal setTimeout(() => { ... }, 0) sehen, denken Sie daran – es geht nicht um die Zeit; Es geht um Priorität!

Das obige ist der detaillierte Inhalt vonWas bedeutet setTimeout(..., ) in JavaScript wirklich? (Ereignisschleife erklärt!). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!