Zrozumienie synchronicznego i asynchronicznego w JavaScript - część 2
W pierwszej części tego posta zobaczyliśmy, jak koncepcje synchroniczne i asynchroniczne są postrzegane w JavaScript. W tej drugiej części Pan X pojawia się ponownie, aby pomóc nam zrozumieć jak setTimeout i AJAX Pszczoła praca.
Dziwna prośba
Cofnijmy się do historii pana X i filmu, na który chcesz wyjść. Powiedzmy, że zostawisz zadanie dla pana X przed wyjazdem i powiedz mu, że może zacząć pracować nad tym zadaniem pięć godzin po dostał twoją wiadomość.
Nie jest z tego zadowolony, pamiętaj, nie przyjmuje nowej wiadomości, dopóki nie skończy z obecną, a jeśli bierze twoją, musi czekać pięć godziny nawet zacząć zadanie. Aby nie tracić czasu, on przynosi pomocnika, Pan H.
Zamiast czekać, prosi pana H o to zostaw nową wiadomość dla zadania w kolejce po upływie określonych godzin i przechodzi do następnej wiadomości.
Pięć godzin; Pan H aktualizuje kolejkę z nową wiadomością. Po zakończeniu przetwarzania wszystkich zgromadzonych wiadomości przed panem H, panem X. wykonuje wymagane zadanie. W ten sposób możesz zostawić prośbę spełniony w późniejszym czasie, i nie czekaj, aż się spełni.
Ale dlaczego pan H pozostawia wiadomość w kolejce zamiast bezpośrednio kontaktować się z panem X? Ponieważ, jak wspomniałem w pierwszej części, tylko sposobem na skontaktowanie się z panem X jest zostawiając mu wiadomość przez telefon - bez wyjątków.
1. The setTimeout () metoda
Załóżmy, że masz zestaw kodu, który chcesz wykonać po pewnym czasie. Aby to zrobić, po prostu zawiń go w funkcję, i dodaj do a setTimeout () metoda wraz z czasem opóźnienia. Składnia setTimeout () następująco:
setTimeout (funkcja, czas opóźnienia, arg…)
The arg… parametr oznacza dowolny argument, który przyjmuje funkcja, i Czas zwłoki należy dodać w milisekundach. Poniżej znajduje się prosty przykład kodu, który generuje dane wyjściowe “Hej” w konsoli po 3 sekundach.
setTimeout (function () console.log ('hey'), 3000); Pewnego razu setTimeout () zaczyna biec, zamiast blokować stos wywołań aż wskazany czas opóźnienia się skończy, a zegar jest wyzwalany, i stos wywołań jest stopniowo opróżniany dla następnej wiadomości (podobnie jak korespondencja między panem X a panem H).
Gdy upłynie czas, nowa wiadomość dołącza do kolejki, a pętla zdarzeń podnosi ją, gdy stos wywołań jest wolny po przetworzeniu wszystkich wiadomości przed nim - w ten sposób kod działa asynchronicznie.
2. AJAX
AJAX (Asynchronous JavaScript and XML) to koncepcja wykorzystująca XMLHttpRequest (XHR) API do wysyłaj żądania serwera i obsługiwać odpowiedzi.
Gdy przeglądarki tworzą żądania serwera bez użycia XMLHttpRequest, the odświeża stronę i ładuje swój interfejs użytkownika. Kiedy przetwarzanie żądań i odpowiedzi jest obsługiwane przez API XHR, i Interfejs użytkownika pozostaje niezmieniony.
Więc zasadniczo celem jest wysyłaj żądania bez przeładowywania strony. Gdzie jest “asynchroniczny” w tym? Używanie kodu XHR (co zobaczymy za chwilę) nie oznacza, że jest to AJAX, ponieważ API XHR może działa zarówno synchronicznie, jak i asynchronicznie.
XHR domyślnie jest ustawione na pracować asynchronicznie; gdy funkcja wykonuje żądanie za pomocą XHR, to zwraca bez czekania na odpowiedź.
Jeśli XHR jest skonfigurowany na być synchronicznym, wtedy funkcja czeka aż do odpowiedź jest odbierana i przetwarzana przed powrotem.
Przykład kodu 1
Ten przykład przedstawia XMLHttpRequest tworzenie obiektu. The otwarty() metoda sprawdza poprawność adresu URL żądania i wysłać() metoda wysyła żądanie.
var xhr = new XMLHttpRequest (); xhr.open („GET”, url); xhr.send ();
Jakikolwiek bezpośredni dostęp do danych odpowiedzi po wysłać() będzie na próżno, ponieważ wysłać() nie czeka dopóki żądanie nie zostanie zakończone. Pamiętaj, że XMLHTTPRequest jest domyślnie ustawiony do pracy asynchronicznej.
Przykład kodu 2
The hello.txt plik w tym przykładzie jest prostym plikiem tekstowym zawierającym tekst „witaj”. The odpowiedź właściwość XHR jest nieprawidłowa, ponieważ nie wypisała tekstu „hello”.
var xhr = new XMLHttpRequest (); xhr.open („GET”, „hello.txt”); xhr.send (); document.write (xhr.response); // pusta struna
XHR wdraża mikro-procedurę, która ciągle sprawdza odpowiedź w każdej milisekundie, i uruchamia zdarzenia dodatkowe dla różnych stanów przechodzi żądanie. Po załadowaniu odpowiedzi, zdarzenie ładowania jest wyzwalane przez XHR, który może dostarczyć prawidłowej odpowiedzi.
var xhr = new XMLHttpRequest (); xhr.open („GET”, „hello.txt”); xhr.send (); xhr.onload = function () document.write (this.response) // zapisuje „hello” do dokumentu
Odpowiedź wewnątrz zdarzenia obciążenia wyświetla „cześć”, poprawny tekst.
Preferowany jest sposób asynchroniczny, ponieważ nie blokuje on innych skryptów, dopóki żądanie nie zostanie zakończone.
Jeśli odpowiedź musi zostać przetworzona synchronicznie, przechodzimy fałszywy jako ostatni argument otwarty, który flaguje interfejs API XHR mówiąc to musi być synchroniczny (domyślnie ostatni argument z otwarty jest prawdziwe, czego nie musisz wyraźnie określać).
var xhr = new XMLHttpRequest (); xhr.open („GET”, „hello.txt”, false); xhr.send (); document.write (xhr.response); // zapisuje „hello” do dokumentu
Po co uczyć się tego wszystkiego?
Prawie wszyscy początkujący popełniają błędy w asynchronicznych pojęciach, takich jak setTimeout () i AJAX, na przykład zakładając setTimeout () wykonuje kod po czasie opóźnienia lub przetwarzając odpowiedź bezpośrednio w funkcji wykonującej żądanie AJAX.
Jeśli wiesz, jak pasuje układanka, możesz uniknąć takiego zamieszania. Wiesz, że czas opóźnienia w setTimeout () nie wskazuje godziny kiedy rozpoczyna się wykonywanie kodu, ale czas kiedy upłynie czas nowa wiadomość jest kolejkowana, która będzie przetwarzana tylko wtedy, gdy stos wywołań będzie wolny.
