Cosa sta dietro l'asincronicità in Javascript: il sistema basato sugli eventi

Question

Per favore aiutami a capire questo.

Hai una funzione che chiama alcuni metodi:

function() {
   methodA(function(){...});
   methodB();
   methodC();
}

Dai linguaggi che non hanno callback o funzioni anonime mi sono abituato al fatto che l'esecuzione non va avanti finché non ritorna un metodo.

In modo che se chiamassi il metodo A con il callback, l'esecuzione dovrebbe attendere fino al ritorno del metodo, il che non sarebbe asincrono, giusto?

In modo che, ad esempio, posso memorizzare la richiamata su qualche oggetto e ottenere il ritorno del metodoA.Quindi vengono eseguiti il ​​metodo B e il metodo C.E quando l'utente fa clic su un pulsante, alcuni gestori eseguono la richiamata?

Sono giunto alla conclusione che non c'è nulla di asincrono in Javascript rispetto a Java o Python (non per quanto riguarda il multithreading)....perché in Java il callback non sarebbe un metodo di chiusura/anonimo, ma un oggetto con il metodo "esegui" e sarebbe esattamente lo stesso, solo un po' più complicato...Naturalmente esiste questo sistema di eventi JS specifico per DOM

Answer 1

I callback in JavaScript non aggiungono implicitamente un comportamento asincrono.Quando viene richiamata una funzione di callback, viene eseguita bene allora, proprio come una normale funzione.(In realtà, una funzione di callback È solo una funzione normale...)

Per questo motivo lo è impossibile per determinare quando l'esecuzione del callback nell'esempio verrà eseguita in relazione agli altri metodi (eccetto che non può essere eseguita prima methodA viene invocato) - potrebbe essere chiamato da methodA O methodB o da un clic successivo, o per niente.(Tuttavia, a meno che non vi sia un'eccezione o che una delle funzioni richiami una delle altre funzioni, allora methodA verrà eseguito prima methodB che a sua volta verrà eseguito prima methodC;Se methodA ha lanciato un'eccezione, quindi nessuno dei due methodB né methodC verrebbe invocato).

Che cosa fa aggiungere il comportamento asincrono è un origine evento asincrono, ad esempio un evento timer o un'azione dell'interfaccia utente come il clic su un pulsante.

Tuttavia, è importante tenere presente che Javascript non dispone né supporta il threading.Il Javascript deve "interrompersi" (l'esecuzione deve ritornare dalla funzione di callback richiamata da un'origine evento asincrono) prima che un nuovo evento asincrono possa essere attivato.(Gli eventi asincroni vengono accodati [come appropriato] in modo che un evento timer non venga "perso" se un'altra richiamata impiega troppo tempo per essere eseguita.)

Ecco perché while (true) {} bloccherà una pagina del browser e impedirà l'elaborazione dei gestori di eventi dei pulsanti.

Buona programmazione.

---

Casi di esempio (demo di jsfiddle):

function invokeNow(callback) {
   // nothing asynchronous going on here.
   // the callback is invoked right now and the result is returned.
   return callback()
}
alert(invokeNow(function () { return "Hello world!" }))

function doLater(callback) {
    // setup an asynchronous event
    setTimeout(callback, 1000)
    return "It isn't 'later' yet!"
}

alert(doLater(function () {
    alert("Later!")
    // note that this is running in the callback from the previous
    // timer event. if this code was below the outer alert then
    // it wouldn't have allowed the first timer callback to have occurred
    // until the blocking while was complete
    alert(doLater(function () { alert("I still ran!") }))
    var end = (+new Date) + 4000
    while ((+new Date) < end) { /* wait */ }
    alert("I am done waiting")
}))

---

Avvertimento:Sembra che ci sia un problema con Firefox 4 (4.0.1) e il codice sopra.Sebbene funzioni come dimostrato, l'ordine previsto differisce dall'ordine effettivo se il timeout è inferiore a circa 800 ms.Ho pubblicato COSÌ:Evento timer asincrono eseguito in modo sincrono ("buggy") in Firefox 4? quindi speriamo che ci sia una soluzione.Il comportamento funziona come previsto in Firefox 3, IE 9 e Chrome 11.

Answer 2

function main() {
   methodA(function callback(){...});
   methodB();
   methodC();
}

Assuming that callback is not immediately executed.

Execution order:

• methodA
• methodB
• methodC
• ... other things until the stack is empty
• callback

Answer 3

Javascript is sequential except if you use setInterval, setTimeout, or make a request to a server with a callback or using onload. Not sure there are other cases.

If you have something like:

function methodA(fn){
  ...
  fn();
}

Then the callback will be called when you call methodA(function(){...})