JavaScript => De evenementenlus

De gebeurtenislus in een webbrowser

De overgrote meerderheid van moderne JavaScript-omgevingen werkt volgens een gebeurtenislus . Dit is een gebruikelijk concept in computerprogrammering, wat in wezen betekent dat uw programma voortdurend wacht op nieuwe dingen die gebeuren, en wanneer ze dat doen, daarop reageert. De hostomgeving roept uw programma aan en roept een "draai" of "vinkje" of "taak" in de gebeurtenislus op, die vervolgens wordt voltooid . Wanneer die beurt is afgelopen, wacht de hostomgeving op iets anders, voordat dit allemaal begint.

Een eenvoudig voorbeeld hiervan is in de browser. Overweeg het volgende voorbeeld:

<!DOCTYPE html>
<title>Event loop example</title>

<script>
console.log("this a script entry point");

document.body.onclick = () => {
  console.log("onclick");
};

setTimeout(() => {
  console.log("setTimeout callback log 1");
  console.log("setTimeout callback log 2");
}, 100);
</script>

In dit voorbeeld is de hostomgeving de webbrowser.

De HTML-parser voert eerst het <script> . Het wordt voltooid.
De aanroep van setTimeout vertelt de browser dat deze na 100 milliseconden een taak moet genereren om de gegeven actie uit te voeren.
In de tussentijd is de event-lus dan verantwoordelijk voor het continu controleren of er iets anders te doen is: bijvoorbeeld het weergeven van de webpagina.
Als na 100 milliseconden de gebeurtenislus om een andere reden niet bezet is, ziet deze de taak die setTimeout instelt en voert de functie uit, waarbij deze twee instructies worden vastgelegd.
Als iemand op het lichaam klikt, zal de browser op elk gewenst moment een taak naar de gebeurtenislus posten om de functie Click Handler uit te voeren. De gebeurtenislus, terwijl deze voortdurend controleert wat te doen, zal dit zien en die functie uitvoeren.

U kunt zien hoe er in dit voorbeeld verschillende soorten invoerpunten in JavaScript-code zijn, die door de gebeurtenislus worden opgeroepen:

Het element <script> wordt onmiddellijk opgeroepen
De taak setTimeout wordt in de gebeurtenislus gepost en eenmaal uitgevoerd
De click handler-taak kan vele malen worden gepost en elke keer worden uitgevoerd

Elke beurt van de evenementlus is verantwoordelijk voor veel dingen; slechts enkele van hen zullen deze JavaScript-taken aanroepen. Zie de HTML-specificatie voor volledige details

Nog een laatste ding: wat bedoelen we met te zeggen dat elke eventlustaak "loopt tot voltooiing"? We bedoelen dat het over het algemeen niet mogelijk is om een codeblok dat in de wachtrij staat om als taak te worden uitgevoerd, te onderbreken en het is nooit mogelijk om code door te voeren die is verweven met een ander codeblok. Zelfs als u bijvoorbeeld op het perfecte tijdstip hebt geklikt, kunt u de bovenstaande code nooit "onclick" tussen de twee setTimeout callback log 1/2" s laten setTimeout callback log 1/2" . Dit komt door de manier waarop het posten van taken werkt; het is coöperatief en gebaseerd op wachtrijen in plaats van preventief.

Asynchrone bewerkingen en de gebeurtenislus

Veel interessante bewerkingen in algemene JavaScript-programmeeromgevingen zijn asynchroon. In de browser zien we bijvoorbeeld dingen als

window.setTimeout(() => {
  console.log("this happens later");
}, 100);

en in Node.js zien we dingen als

fs.readFile("file.txt", (err, data) => {
  console.log("data");
});

Hoe past dit in de loop van het evenement?

Hoe dit werkt is dat wanneer deze uitspraken uit te voeren, vertellen ze de nieuwe omgeving (dat wil zeggen, de browser of Node.js runtime, respectievelijk) om af te gaan en iets te doen, waarschijnlijk in een andere thread. Wanneer de file.txt klaar is met het doen van dat ding (respectievelijk 100 milliseconden wachten of het bestand file.txt ), zal het een taak in de gebeurtenislus plaatsen en zeggen: "call de callback die ik eerder met deze argumenten kreeg".

De event-lus is dan bezig zijn ding te doen: de webpagina weergeven, luisteren naar gebruikersinvoer en voortdurend zoeken naar geposte taken. Wanneer het deze geposte taken ziet om de callbacks op te roepen, zal het terugbellen in JavaScript. Zo krijg je asynchroon gedrag!

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

JavaScript
De evenementenlus

Zoeken…

De gebeurtenislus in een webbrowser

Asynchrone bewerkingen en de gebeurtenislus