Detaillierte Erklärung der Verwendung von EventLoop in JS

Dieses Mal werde ich Ihnen die Verwendung von EventLoop in JS ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von EventLoop in JS?

Stellen Sie sich zum Beispiel vor, dass der Browser einen komplexen Bildkonvertierungsalgorithmus ausführt. Da er Single-Threaded ist, ist der Browserprozess zu diesem Zeitpunkt blockiert und kann die Schnittstelle nicht rendern oder anderen Code ausführen Die Schnittstelle verliert die Interaktion mit dem Benutzer.

Dies ist normalerweise kein großes Problem, aber wenn der Browser mehrere ähnliche Algorithmen gleichzeitig ausführt, wird dieses Problem ernst.

Die meisten JS-Entwickler mit gewisser Erfahrung verstehen die asynchrone Ausführung von Code, insbesondere die Verwendung von Ajax.

// ajax(..) is some arbitrary Ajax function given by a library
var response = ajax('https://example.com/api');
console.log(response);
// `response` won't have the response

Diese Antwort führt nicht zum gewünschten Ergebnis.

Stattdessen müssen Sie die Rückruffunktion verwenden, um das Ergebnis

ajax('https://example.com/api', function(response) {
  console.log(response); // `response` is now available
});

wie Xianmian zu erhalten Zur Erinnerung: Der folgende Code „async: false“ ist nie eine gute Idee.

// This is assuming that you're using jQuery
jQuery.ajax({
  url: 'https://api.example.com/endpoint',
  success: function(response) {
    // This is your callback.
  },
  async: false // And this is a terrible idea
});

Anhand des obigen Beispiels sollten wir verstehen, dass asynchrone Funktionen uns bei der Lösung ähnlicher Probleme wie der Browserblockierung helfen können.

Natürlich können Sie dieselbe Logik auch über setTimeout(callback, milliseconds) implementieren. Wenn Sie asynchron verstehen, was wird ausgegeben, wenn der folgende Code ausgeführt wird?

function first() {
  console.log('first');
}
function second() {
  console.log('second');
}
function third() {
  console.log('third');
}
first();
setTimeout(second, 1000); // Invoke `second` after 1000ms
third();

Was ist nun das Prinzip des asynchronen Verarbeitungsmechanismus? Hier stellen wir unseren Event Loop Event Loop vor

Die Ereignisschleife hat einen einfachen Job (Aufgabe): Sie überwacht den Aufrufstapel und die Rückrufwarteschlange. Wenn der Aufrufstapel leer ist, wird das erste Ereignis aus der Warteschlange auf den Aufrufstapel verschoben und so effektiv ausgeführt.

Diese Iteration wird in der Ereignisschleife als Tick bezeichnet. Jedes Ereignis ist nur ein Funktionsrückruf.

console.log('Hi');
setTimeout(function cb1() { 
  console.log('cb1');
}, 5000);
console.log('Bye');

Führen Sie diesen Code aus

Beachten Sie, dass setTimeout(...) Ihren Rückruf nicht automatisch in die Ereignisschleifenwarteschlange stellt.

Es stellt einen Timer ein. Wenn der Timer abläuft, fügt der Browser Ihren Rückruf in die Ereignisschleife ein, sodass ein zukünftiger Tick ausgeführt wird. Es können jedoch weitere Ereignisse in der Warteschlange vorhanden sein, die hinzugefügt wurden – Ihr Rückruf wird nicht sofort ausgeführt.

Es gibt viele Artikel und Tutorials zum Einstieg mit asynchronem Code in JavaScript und es wird empfohlen, setTimeout(callback, 0) zu verwenden.
Jetzt wissen Sie, wie die Ereignisschleife funktioniert und wie setTimeout funktioniert.

Sie können den folgenden Code besser verstehen

console.log('Hi');
setTimeout(function() {
  console.log('callback');
}, 0);
console.log('Bye');

Obwohl die Wartezeit auf 0 ms eingestellt ist, sieht das Ergebnis in der Browserkonsole so aus:

Hallo

Tschüss

Rückruf

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung von Slot und Slot-Scope in Vue

Markierungsüberlagerung entfernen auf der Baidu-Kartenmethode

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Verwendung von EventLoop in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!