JavaScript è a thread singolo e ha un modello di esecuzione sincrono. Il thread singolo indica che viene eseguito un comando alla volta. Sincrono significa uno alla volta, cioè una riga di codice viene eseguita alla volta nell'ordine in cui appare il codice. Quindi in JavaScript succede una cosa alla volta.
Contesto di esecuzione
Il motore JavaScript interagisce con altri motori nel browser. Nello stack di esecuzione JavaScript c'è un contesto globale in basso e quindi quando invochiamo le funzioni il motore JavaScript crea nuovi contesti di esecuzione per le rispettive funzioni. Quando la funzione chiamata esce, il suo contesto di esecuzione viene estratto dallo stack, quindi viene visualizzato il contesto di esecuzione successivo e così via ...
Per esempio
function abc()
{
console.log('abc');
}
function xyz()
{
abc()
console.log('xyz');
}
var one = 1;
xyz();
Nel codice sopra verrà creato un contesto di esecuzione globale e in questo contesto var one verrà memorizzato e il suo valore sarà 1 ... quando viene chiamato l'invocazione xyz (), verrà creato un nuovo contesto di esecuzione e se avessimo definito una variabile nella funzione xyz tali variabili verrebbero archiviate nel contesto di esecuzione di xyz (). Nella funzione xyz invochiamo abc () e quindi il contesto di esecuzione abc () viene creato e inserito nello stack di esecuzione ... Ora quando abc () termina il suo contesto viene estratto dallo stack, quindi il contesto xyz () viene estratto da lo stack e quindi il contesto globale verranno visualizzati ...
Ora sui callback asincroni; asincrono significa più di uno alla volta.
Proprio come lo stack di esecuzione c'è la coda degli eventi . Quando desideriamo ricevere una notifica relativa ad alcuni eventi nel motore JavaScript, possiamo ascoltarli e quell'evento viene inserito nella coda. Ad esempio un evento di richiesta Ajax o un evento di richiesta HTTP.
Ogni volta che lo stack di esecuzione è vuoto, come mostrato nell'esempio di codice sopra riportato, il motore JavaScript controlla periodicamente la coda degli eventi e verifica se è presente un evento a cui inviare notifiche. Ad esempio nella coda c'erano due eventi, una richiesta Ajax e una richiesta HTTP. Sembra anche che ci sia una funzione che deve essere eseguita su quel trigger di evento ... Quindi il motore JavaScript viene avvisato dell'evento e conosce la rispettiva funzione da eseguire su quell'evento ... Quindi il motore JavaScript invoca il funzione handler, nel caso di esempio, ad esempio AjaxHandler () verrà invocato e come sempre quando viene invocata una funzione, il suo contesto di esecuzione viene inserito nel contesto di esecuzione e ora l'esecuzione della funzione termina e l'evento ajax viene anche rimosso dalla coda degli eventi ... Quando AjaxHandler () termina lo stack di esecuzione è vuoto, quindi il motore guarda di nuovo la coda degli eventi ed esegue la funzione di gestione degli eventi della richiesta HTTP che era successiva nella coda. È importante ricordare che la coda degli eventi viene elaborata solo quando lo stack di esecuzione è vuoto.
Ad esempio, vedere il codice seguente che spiega lo stack di esecuzione e la gestione della coda eventi dal motore Javascript.
function waitfunction() {
var a = 5000 + new Date().getTime();
while (new Date() < a){}
console.log('waitfunction() context will be popped after this line');
}
function clickHandler() {
console.log('click event handler...');
}
document.addEventListener('click', clickHandler);
waitfunction(); //a new context for this function is created and placed on the execution stack
console.log('global context will be popped after this line');
E
<html>
<head>
</head>
<body>
<script src="program.js"></script>
</body>
</html>
Ora esegui la pagina web e fai clic sulla pagina e vedi l'output sulla console. L'output sarà
waitfunction() context will be popped after this line
global context will be emptied after this line
click event handler...
Il motore JavaScript esegue il codice in modo sincrono, come spiegato nella parte del contesto di esecuzione, il browser inserisce le cose in modo asincrono nella coda degli eventi. Pertanto, le funzioni che richiedono molto tempo per il completamento possono interrompere la gestione degli eventi. Le cose che accadono in un browser come gli eventi sono gestite in questo modo da JavaScript, se c'è un listener che dovrebbe funzionare, il motore lo eseguirà quando lo stack di esecuzione è vuoto. E gli eventi vengono elaborati nell'ordine in cui si verificano, quindi la parte asincrona riguarda ciò che sta accadendo all'esterno del motore, ovvero cosa dovrebbe fare il motore quando si verificano tali eventi esterni.
Quindi JavaScript è sempre sincrono.
