Razumevanje sinhrone in asinhrone v JavaScriptu - 2. del
V prvem delu te objave smo videli, kako koncepti sinhronih in asinhronih dojemajo v JavaScriptu. V tem drugem delu se gospod X spet pojavi, da nam pomaga razumeti kako setTimeout in AJAX API-ji delo.
Neobičajna zahteva
Vrnimo se nazaj na zgodbo gospoda X in film, ki ga želite zapustiti. Recimo, da gospodu X-ju pustite nalogo pred izletom in mu povejte, da lahko začne z delom na tej nalogi pet ur po dobil je tvoje sporočilo.
Ni vesel tega, ne pozabite, da ne sprejema novega sporočila, dokler ne opravi s trenutnim, in če bo vzel tvojega, počakati pet ure celo začeti z nalogo. Torej, da ne zapravljamo časa, on prinaša pomočnika, Gospod H.
Namesto čakanja, prosi gospoda H pustite novo sporočilo za opravilo v čakalni vrsti po preteku določenih ur, in se premakne na naslednje sporočilo.
Pet ur preteklosti; Gospod H posodobi čakalno vrsto z novim sporočilom. Ko je obdelal vsa pridobljena sporočila pred gospodom H, je g. X opravi zahtevano nalogo. Na ta način lahko pustite prošnjo kasneje, in ne čakati, da se izpolni.
Toda zakaj gospod H pusti sporočilo v čakalni vrsti, namesto da bi neposredno stopil v stik z gospodom X? Ker, kot sem omenil v prvem delu, je samo X je tako tako, da mu pustite sporočilo prek telefonskega klica - brez izjem.
1. setTimeout () metodo
Recimo, da imate nabor kode, ki jo želite po določenem času. Da bi to naredil, si samo ga ovijte v funkcijo, in dodajte v a setTimeout () metodo skupaj z zakasnitvijo. Skladnja setTimeout () kot sledi:
setTimeout (funkcija, čas zakasnitve, arg…)
The arg… parameter stoji za kateri koli argument, ki ga zahteva funkcija, in čas zakasnitve se doda v milisekundah. Spodaj je prikazan preprost primer kode, ki izhaja “zdravo” po 3 sekundah.
setTimeout (funkcija () console.log ('hej'), 3000); Enkrat setTimeout () začne teči, namesto da bi blokirali sklad dokler se navedeni čas zamude ne konča, a se sproži časovnik, in stack za klic se postopoma izprazni za naslednje sporočilo (podobno kot korespondenca med g. X in g. H).
Ko časovnik poteče, se prikaže novo sporočilo se pridruži čakalni vrsti, in zanka za dogodek jo pokliče, ko je klicni stavek prost po obdelavi vseh sporočil pred njim - torej koda deluje asinhrono.
2. AJAX
AJAX (Asinhroni JavaScript in XML) je koncept, ki uporablja XMLHttpRequest (XHR) API za zahteva strežnika in ravnajte z odgovori.
Ko brskalniki zahtevajo strežnik brez uporabe XMLHttpRequest, bo stran osveži in ponovno naloži svoj uporabniški vmesnik. Ko obdelavo zahtev in odgovorov obravnava XHR API, in UI ostane nespremenjen.
Torej je cilj v bistvu dajanje zahtevkov brez ponovnega nalaganja strani. Zdaj, kje je “asinhrono” v tem? Samo uporaba kode XHR (ki jo bomo videli v trenutku) ne pomeni, da je to AJAX, ker lahko API XHR delo na sinhroni in asinhroni način.
XHR privzeto je nastavljeno na delo asinhrono; ko funkcija zahteva zahtevo z uporabo XHR, je vrne brez čakanja na odgovor.
Če je nastavljen XHR biti sinhroni, potem funkcija počaka do Odziv je prejet in obdelan pred vrnitvijo.
Primer kode 1
Ta primer predstavlja a XMLHttpRequest ustvarjanje predmetov. The odprto() metoda, potrdi URL zahteve in pošlji () metoda pošlje zahtevo.
var xhr = novo XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Vsak neposreden dostop do odzivnih podatkov po pošlji () bo zaman, ker pošlji () ne čaka dokler zahtevek ni končan. Ne pozabite, da je XMLHTTPRequest privzeto nastavljen tako, da deluje asinhrono.
Šifra Primer 2
The hello.txt Datoteka v tem primeru je preprosta besedilna datoteka, ki vsebuje besedilo "zdravo". The odziv lastnost XHR ni veljavna, ker ni izpisala besedila "zdravo".
var xhr = novo XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // prazen niz XHR izvaja mikro-rutino še naprej preverja odgovor v vsaki milisekundi, in. \ t sproži brezplačne dogodke za različne države se zahteva zahteva. Ko je odgovor naložen, XHR sproži dogodek obremenitve, ki lahko zagotovi veljaven odgovor.
var xhr = novo XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // piše 'hello' v dokument Odziv znotraj dogodka nalaganja izpisuje "zdravo", pravilno besedilo.
Priporoča se izvajanje asinhrone poti, saj ne blokira drugih skriptov, dokler zahtevek ni dokončan.
Če je treba odziv obdelati sinhrono, preidemo false kot zadnji argument odprto, ki označi API XHR rekel mora biti sinhrono (privzeto zadnji argument za odprto je prav, ki jih ni treba izrecno določiti).
var xhr = novo XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // piše 'hello' za dokument Zakaj se vse to naučiti?
Skoraj vsi začetniki naredijo nekaj napak pri asinhronih konceptih, kot je npr setTimeout () in AJAX, na primer s predpostavko setTimeout () izvede kodo po času zakasnitve ali z obdelavo odgovora neposredno znotraj funkcije, ki zahteva AJAX.
Če veste, kako se sestavljanka ujema, lahko da bi se izognili takšni zmedi. Veš, da je čas zakasnitve v setTimeout () ne kaže časa ko se začne izvrševanje kode, ampak čas ob izteku časa in novo sporočilo je v čakalni vrsti, ki bo obdelano samo, ko bo klicni sklad to lahko storil.
