Zrozumienie synchronicznego i asynchronicznego kodu JavaScript - część 1

Synchroniczny i asynchroniczny są mylące koncepcje w JavaScript, zwłaszcza dla początkujących. Dwie lub więcej rzeczy są synchroniczny kiedy oni zdarzyć się w tym samym czasie (zsynchronizowane) i asynchroniczne, kiedy nie (nie zsynchronizowane).

Chociaż definicje te są łatwe do przyjęcia, są w rzeczywistości bardziej skomplikowane niż się wydaje. Musimy wziąć pod uwagę co dokładnie jest zsynchronizowane, i co nie jest.

Prawdopodobnie zadzwonisz normalna funkcja synchroniczna z JavaScript, prawda? A jeśli to jest coś takiego setTimeout () lub AJAX, z którym pracujesz, określisz to jako asynchroniczne, tak? Co jeśli ci to powiem obie są w pewien sposób asynchroniczne?

Aby wyjaśnić czemu, musimy zwrócić się do pana X o pomoc.

Scenariusz 1 - Pan X próbuje synchronizacji

Oto konfiguracja:

Pan X to ktoś, kto może odpowiedzieć na trudne pytania i wykonać każde zlecone zadanie.
Jedynym sposobem na skontaktowanie się z nim jest rozmowa telefoniczna.
Jakiekolwiek masz pytanie lub zadanie, aby poprosić Pana X o pomoc w jego realizacji; dzwonisz do niego.
Pan X daje odpowiedź lub wykonuje zadanie od razu, i wiesz zrobione.
Odłożyłeś słuchawkę, czując zawartość i idziesz na film.

To, co właśnie przeprowadziłeś, było synchroniczna (tam iz powrotem) komunikacja z panem X. Słuchał, jak zadajesz mu swoje pytanie, a słuchałeś, kiedy na nie odpowiadał.

Scenariusz 2 - Pan X nie jest zadowolony z synchroniczności

Ponieważ pan X jest tak wydajny, zaczyna odbierać o wiele więcej połączeń. Więc co się dzieje, kiedy do niego dzwonisz, ale jest już zajęty rozmawiać z kimś innym? Nie będziesz mógł zadać mu pytania - dopóki nie będzie mógł odebrać twojego połączenia. Usłyszysz tylko sygnał zajętości.

Co więc może zrobić pan X, aby temu przeciwdziałać??

Zamiast odbierać połączenia bezpośrednio:

Pan X zatrudnia nowego faceta, pana M i daje mu automatyczną sekretarkę dla dzwoniących zostawić wiadomości.
Zadaniem pana M jest przekazać wiadomość od automatycznej sekretarki do pana X, gdy wie, że pan X całkowicie zakończył przetwarzanie wszystkich poprzednich wiadomości i już jest swobodnie wziąć nowy.
Więc teraz, kiedy do niego zadzwonisz, zamiast otrzymywać zajęty ton, musisz zostawić wiadomość dla pana X. poczekaj, aż oddzwoni (brak czasu filmu).
Kiedy Pan X skończy wszystkie wiadomości w kolejce, które otrzymał przed twoim, zajmie się twoim problemem oddzwonię aby dać ci odpowiedź.

Oto pytanie: czy dotychczasowe działania były synchroniczny lub asynchroniczny?

To jest mieszane. Kiedy zostawiłeś wiadomość, Pan X nie słuchał tego, więc czwarta komunikacja była asynchroniczna.

Ale kiedy odpowiedział, ty słuchałeś, który sprawia, że komunikacja zwrotna jest synchroniczna.

Mam nadzieję, że do tej pory lepiej zrozumiałeś, w jaki sposób synchroniczność jest postrzegana w kategoriach komunikacji. Czas wprowadzić JavaScript.

JavaScript - asynchroniczny język programowania

Gdy ktoś oznaczy JavaScript asynchronicznie, to, o czym ogólnie mówi, to jak możesz zostaw wiadomość za to i nie blokuj połączenia z tonem zajęty.

Wywołania funkcji są nigdy bezpośrednio w JavaScript, są dosłownie zrobione za pośrednictwem wiadomości.

JavaScript używa a kolejka wiadomości gdzie przychodzące wiadomości (lub zdarzenia) są przechowywane. Na pętla zdarzeń (dyspozytor wiadomości) sekwencyjnie wysyła te wiadomości do a stos wywołań gdzie są odpowiednie funkcje wiadomości ułożone w ramki (argumenty funkcji i zmienne) do wykonania.

Stos wywołań przechowuje ramkę wywołanej funkcji początkowej i wszystkie inne ramki dla wywoływanych funkcji przez połączenia zagnieżdżone na górze tego .

Gdy wiadomość dołącza do kolejki, czeka aż stos wywołań będzie opróżnij wszystkie ramki z poprzedniej wiadomości, a kiedy to jest, pętla zdarzeń usuwa poprzednią wiadomość, i dodaje odpowiednie ramki bieżącej wiadomości do stosu wywołań.

Wiadomość ponownie czeka, aż stos wywołań stanie się pusta z odpowiadających jej ramek (tj. wykonywanie wszystkich funkcji skumulowanych jest zakończone), a następnie jest usuwane z kolejki.

Rozważ następujący kod:

 funkcja foo ()  function bar () foo ();  funkcja baz () bar ();  baz ();

Uruchomiona funkcja jest baz () (w ostatnim wierszu fragmentu kodu), dla którego wiadomość jest dodawana do kolejki, i kiedy pętla zdarzeń podnosi ją, stos wywołań zaczyna układać ramki dla baz (), bar(), i bla() w odpowiednich punktach wykonania.

Po zakończeniu wykonywania funkcji jeden po drugim, ich ramki są usunięte ze stosu połączeń, podczas gdy wiadomość jest wciąż czekam w kolejce, aż do baz () jest wystrzelony ze stosu.

Pamiętaj, że wywołania funkcji są nigdy bezpośrednio w JavaScript, są gotowe za pośrednictwem wiadomości. Więc kiedy słyszysz, jak ktoś mówi, że sam JavaScript jest asynchronicznym językiem programowania, załóżmy, że mówią o jego wbudowanym “automatyczna sekretarka”, i jak możesz zostawić wiadomości.

Ale co z konkretnymi metodami asynchronicznymi?

Do tej pory nie dotykałem API, takich jak setTimeout () i AJAX to te, które są konkretnie określany jako asynchroniczny. Dlaczego?

Ważne jest, aby zrozumieć, co dokładnie jest synchroniczne lub asynchroniczne. JavaScript, z pomocą zdarzeń i pętli zdarzeń, może ćwiczyć asynchroniczne przetwarzanie wiadomości, ale to nie znaczy wszystko w JavaScript jest asynchroniczny.

Pamiętaj, powiedziałem ci, że wiadomość nie została wysłana, dopóki nie było stosu połączeń pusta z odpowiednich ramek, tak jak nie odszedłeś na film, dopóki nie otrzymasz odpowiedzi - to jest synchroniczny, czekasz tam dopóki zadanie nie zostanie zakończone, a otrzymasz odpowiedź.

Czekanie nie jest idealny we wszystkich scenariuszach. Co jeśli po opuszczeniu wiadomości, zamiast czekać, możesz odejść do filmu? Co zrobić, jeśli funkcja może wycofać się (opróżnienie stosu wywołań), a jego wiadomość może zostać usunięta z listy nawet przed zakończeniem zadania funkcji? Co zrobić, jeśli kod jest wykonywany asynchronicznie?

W tym miejscu API, takie jak setTimeout () AJAX pojawia się na zdjęciu, a to, co robią, jest… trzymaj się, nie mogę tego wyjaśnić bez powrotu do pana X, co zobaczymy w drugiej części tego artykułu. Bądźcie czujni.