Ricerca…
Il ciclo degli eventi in un browser web
La stragrande maggioranza dei moderni ambienti JavaScript funziona secondo un ciclo di eventi . Questo è un concetto comune nella programmazione di computer che essenzialmente significa che il tuo programma attende continuamente che succedano cose nuove e, quando lo fanno, reagisce a loro. L' ambiente host chiama nel tuo programma, generando un "turn" o "tick" o "task" nel ciclo degli eventi, che quindi viene eseguito fino al completamento . Al termine di quel turno, l'ambiente host attende che accada qualcos'altro, prima che tutto inizi.
Un semplice esempio di questo è nel browser. Considera il seguente esempio:
<!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 questo esempio, l'ambiente host è il browser web.
- Il parser HTML eseguirà prima lo
<script>. Funzionerà fino alla fine. - La chiamata a
setTimeoutindica al browser che, dopo 100 millisecondi, dovrebbe accodare un'attività per eseguire l'azione specificata. - Nel frattempo, il ciclo degli eventi è quindi responsabile di verificare continuamente se c'è qualcos'altro da fare: ad esempio, il rendering della pagina web.
- Dopo 100 millisecondi, se il ciclo degli eventi non è occupato per qualche altro motivo, vedrà l'attività che
setTimeoutaccoderà ed eseguirà la funzione, registrando queste due istruzioni. - In qualsiasi momento, se qualcuno fa clic sul corpo, il browser invierà un'attività al ciclo degli eventi per eseguire la funzione di gestione dei clic. Il ciclo degli eventi, mentre va in giro controllando continuamente cosa fare, vedrà questo ed eseguirà quella funzione.
Puoi vedere come in questo esempio ci sono diversi tipi di punti di ingresso nel codice JavaScript, che il ciclo di eventi richiama:
- L'elemento
<script>viene richiamato immediatamente - L'attività
setTimeoutviene registrata nel ciclo degli eventi ed eseguita una volta - L'attività del gestore di clic può essere pubblicata più volte e eseguita ogni volta
Ogni turno del ciclo degli eventi è responsabile di molte cose; solo alcuni di essi invocheranno queste attività JavaScript. Per i dettagli completi, consultare le specifiche HTML
Un'ultima cosa: cosa intendiamo dicendo che ogni task del ciclo di eventi "corre fino al completamento"? Intendiamo che non è generalmente possibile interrompere un blocco di codice che viene accodato per essere eseguito come attività e non è mai possibile eseguire il codice intercalato con un altro blocco di codice. Ad esempio, anche se si fa clic sul momento perfetto, non è possibile ottenere il codice sopra riportato per registrare "onclick" tra i due setTimeout callback log 1/2" . Ciò è dovuto al modo in cui funziona l'attività di post-registrazione; è cooperativo e basato sulla coda, invece che preventivo.
Operazioni asincrone e loop eventi
Molte operazioni interessanti in ambienti di programmazione JavaScript comuni sono asincrone. Ad esempio, nel browser vediamo cose come
window.setTimeout(() => {
console.log("this happens later");
}, 100);
e in Node.js vediamo cose simili
fs.readFile("file.txt", (err, data) => {
console.log("data");
});
Come si inserisce questo evento nel ciclo degli eventi?
Il modo in cui funziona è che quando queste istruzioni vengono eseguite, dicono all'ambiente host (ad esempio, il browser o il runtime Node.js, rispettivamente) di andare fuori e fare qualcosa, probabilmente in un altro thread. Quando l'ambiente host è terminato facendo quella cosa (rispettivamente, aspettando 100 millisecondi o leggendo il file file.txt ), invierà un'attività al ciclo degli eventi, dicendo "chiama il callback che mi è stato dato prima con questi argomenti".
Il ciclo degli eventi è quindi occupato a fare la sua cosa: renderizzare la pagina web, ascoltare l'input dell'utente e cercare continuamente le attività postate. Quando vede queste attività postate richiamare i callback, richiama in JavaScript. Ecco come si ottiene il comportamento asincrono!