Razumijevanje sinkronog i asinkronog u JavaScriptu - 2. dio

U prvom dijelu posta, vidjeli smo kako pojmovi sinkroni i asinkroni se percipiraju u JavaScriptu. U ovom drugom dijelu, gospodin X se ponovno pojavljuje kako bi nam pomogao razumjeti kako setTimeout i AJAX Apis raditi.

Neparan zahtjev

Vratimo se natrag u priču o gospodinu X i filmu za koji želite otići. Recimo da ostavite zadatak gospodinu X prije izleta i recite mu da on može početi raditi na tom zadatku pet sati nakon dobio je tvoju poruku.

On nije sretan zbog toga, zapamtite, on ne uzima novu poruku dok ne završi s trenutnom, i ako on uzme vašu, on mora čekati pet sati čak i započeti zadatak. Dakle, da ne budete trošili vrijeme, on donosi pomoćnika, G. H.

Umjesto da čeka, traži ga od gospodina H ostavite novu poruku za zadatak u redu čekanja nakon što su dani sati prošli, i prelazi na sljedeću poruku.

Prošlo je pet sati; G. H ažurira red s novom porukom. Nakon što je završio s obradom svih prikupljenih poruka prije g. H, g. X obavlja zadani zadatak. Na taj način, možete ostaviti zahtjev da bude poštivati ​​kasnije, i ne čekati dok se ne ispuni.

Ali zašto gospodin H ostavlja poruku u redu umjesto da izravno kontaktira gospodina X? Jer kao što sam spomenuo u prvom dijelu, samo Način kontaktiranja g. X je ostavljajući mu poruku putem telefonskog poziva - nema iznimaka.

1. setTimeout () način

Pretpostavimo da imate skup koda koji želite izvršiti nakon određenog vremena. Da biste to učinili, vi samo zamotajte ga u funkciju, i dodajte ga u setTimeout () način zajedno s vremenom odgode. Sintaksa setTimeout () je kako slijedi:

 setTimeout (funkcija, vrijeme odgode, arg…) 

arg ... parametar označava bilo koji argument koji funkcija uzima, i vrijeme odgode dodaje se u milisekundama. U nastavku možete vidjeti jednostavan primjer koda koji izlazi “ej” u konzoli nakon 3 sekunde.

 setTimeout (funkcija () console.log ('hej'), 3000); 

Jednom setTimeout () počinje se prikazivati, umjesto blokiranja skupa poziva dok se naznačeno vrijeme odgode ne završi, a Tajmer se aktivira, i stog poziva se postupno prazni za sljedeću poruku (slično kao i korespondencija između g. X i g. H).

Kada vrijeme istekne, nova poruka pridružuje se redu čekanja, i petlja događaja pokupi je kada je stog poziva slobodan nakon obrade svih poruka pred njim - stoga se kôd izvodi asinkrono.

2. AJAX

AJAX (Asinkroni JavaScript i XML) je koncept koji koristi XMLHttpZahtjev (XHR) API za zahtjeve poslužitelja i obradite odgovore.

Kada preglednici naprave poslužiteljske zahtjeve bez korištenja XMLHttpRequest, stranica osvježava i ponovno učitava korisničko sučelje. Kada obrada zahtjeva i odgovora obrađuje XHR API, i Korisničko sučelje ostaje nepromijenjeno.

Dakle, u osnovi je cilj postavljati zahtjeve bez ponovnog učitavanja stranica. Sada, gdje je “asinhron” u ovome? Samo korištenje XHR koda (koji ćemo vidjeti za trenutak) ne znači da je AJAX, jer XHR API može raditi na sinkroni i asinkroni način.

XHR prema zadanim postavkama je postavljeno na rade asinkrono; kada funkcija napravi zahtjev koristeći XHR, to vraća bez čekanja odgovora.

Ako je XHR konfiguriran biti sinkroni, tada funkcija čeka dok se odgovor je primljen i obrađen prije povratka.

Primjer koda 1

Ovaj primjer predstavlja XMLHttpZahtjev stvaranje objekta. otvorena() metoda, potvrđuje URL zahtjeva i poslati() metoda šalje zahtjev.

 var xhr = novo XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); 

Svaki izravan pristup podacima o odgovoru poslije poslati() će biti uzalud, jer poslati() ne čeka dok se zahtjev ne dovrši. Zapamtite, XMLHTTPRequest je postavljen da radi asinkrono po defaultu.

Kodni primjer 2

hello.txt Datoteka u ovom primjeru je jednostavna tekstualna datoteka koja sadrži tekst 'hello'. odgovor svojstvo XHR-a je nevažeće, jer nije izašlo tekst "hello".

 var xhr = novo XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // prazan niz 

XHR implementira mikro-rutinu nastavlja provjeravati odgovor u svakoj milisekundi, i aktivira besplatne događaje za različite države prolazi zahtjev. Kada se odgovor učita, događaj učitavanja pokreće XHR, koji mogu dati valjani odgovor.

 var xhr = novo XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // piše 'hello' u dokument 

Odgovor unutar događaja učitavanja izlazi "zdravo", ispravan tekst.

Poželjan je asinkroni način jer ne blokira druge skripte dok se zahtjev ne dovrši.

Ako se odgovor mora obraditi sinkrono, prolazimo lažan kao posljednji argument otvorena, koji označava XHR API govoreći to mora biti sinkroni (zadano zadnje argument od otvorena je pravi, koje ne trebate izričito navesti.

 var xhr = novo XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // piše 'hello' u dokument 

Zašto sve ovo učiti?

Gotovo svi početnici prave neke pogreške s asinkronim konceptima kao što su setTimeout () i AJAX, na primjer uz pretpostavku setTimeout () izvršava kod nakon vremena kašnjenja, ili obradom odgovora izravno unutar funkcije koja daje AJAX zahtjev.

Ako znate kako se slagalica uklapa, možete izbjegavajte takvu zbrku. Znate da je vrijeme odgode u setTimeout () ne označava vrijeme kada započinje izvršavanje koda, ali vrijeme kada vrijeme istekne i nova poruka je u redu čekanja, koja će se obrađivati ​​samo kada je stog poziva slobodan.