W jaki sposób kod JavaScript staje się asynchroniczny podczas korzystania z wywołań zwrotnych?

Dużo czytam w Internecie, próbując dowiedzieć się, jak napisać asynchroniczny kod JavaScript. Jedną z technik, która pojawiła się często w moich badaniach, jest użycie wywołań zwrotnych. Chociaż rozumiem proces pisania i wykonywania funkcji wywołania zwrotnego, jestem zdezorientowany, dlaczego wywołania zwrotne automagicznie sprawiają, że wykonywanie JavaScript jest asynchroniczne. Moje pytanie brzmi zatem: w jaki sposób dodanie funkcji wywołania zwrotnego do mojego kodu JavaScript powoduje automatyczną asynchronizację tego kodu?

Tak nie jest. Samo oddzwonienie lub przekazanie oddzwonienia nie oznacza, że ​​jest on asynchroniczny.

Na przykład .forEachfunkcja odbiera połączenie zwrotne, ale jest synchroniczna.

var available = false;
[1,2,3].forEach( function(){
    available = true;
});
//code here runs after the whole .forEach has run,
//so available === true here

setTimeoutTrwa zbyt zwrotnego i jest asynchroniczne.

function myFunction( fn ) {
    setTimeout( function() {
        fn(1,2,3);
    }, 0 );
}

var available = false;
myFunction( function() {
    available = true;
});
//available is never true here

Podłączenie do dowolnego zdarzenia asynchronicznego w JavaScript zawsze wymaga wywołania zwrotnego, ale to nie znaczy, że wywoływanie funkcji lub przekazywanie ich jest zawsze asynchroniczne.

Sekret „magii” polega na tym, że zdarzenia, do których przypisujesz wywołania zwrotne, są asynchroniczne. Są one wdrażane „pod maską”, aby zająć się wszystkim, co robią (np. Odzyskiwanie czegoś ze zdalnego serwera) w tle, poza piaskownicą JS. A potem, kiedy skończą swoją pracę, przekazują silnikowi JS komunikat o wywołaniu zdarzenia. Gdy silnik JS zakończy działanie tego, co aktualnie robi, wywoła wszelkie zdarzenia, które są w kolejce (lub poczekają na nową wiadomość), a następnie Twoje wywołanie zwrotne zostanie „magicznie” wywołane asynchronicznie!

( UWAGA: jest to bardzo ogólny, koncepcyjny przegląd tematu, który nie wchodzi w szczegóły, ponieważ różne silniki JS będą wdrażać różne rzeczy. Ale to jest ogólny pomysł na to, jak to działa.)