Forståelse Synkron og Asynkron i JavaScript - Del 2
I første del af dette indlæg så vi hvordan begreber synkron og asynkron opfattes i JavaScript. I denne anden del synes hr. X igen at hjælpe os med at forstå hvordan setTimeout og AJAX API'er arbejde.
En ulige anmodning
Lad os spole tilbage til historien om hr. X og den film, du vil forlade. Sig, du forlader en opgave for hr. X før udflugten, og fortæl ham, at han kun kan begynde at arbejde på denne opgave fem timer efter han fik din besked.
Han er ikke glad for det, husk, han tager ikke en ny besked, før han er færdig med den nuværende, og hvis han tager din, må vente på fem timer at selv starte på opgaven. Så for ikke at være spildt af tid, han bringer i en hjælper, Hr. Hr.
I stedet for at vente spørger han hr. H til Forlad en ny besked til opgaven i køen efter de givne timer var gået, og fortsætter til næste besked.
Fem timer forbi; Hr. Hr opdaterer køen med en ny besked. Efter at han er færdig med at behandle alle de påløbne meddelelser inden hr. Hrs, hr. X udfører din ønskede opgave. Så på denne måde kan du efterlade en anmodning om at være overholdt på et senere tidspunkt, og vent ikke, før det er opfyldt.
Men hvorfor forlader hr H en besked i køen i stedet for direkte henvendelse til hr. X? Fordi som jeg nævnte i første del, kun måde at kontakte hr. X er på ved at efterlade en besked til ham via telefonopkald - ingen undtagelser.
1. Den setTimeout () metode
Antag at du har et sæt kode, som du vil udføres efter en vis tid. For at gøre det, du bare Indpak det i en funktion, og tilføj det til en setTimeout () metode sammen med forsinkelsestiden. Syntaks af setTimeout () er som følgende:
setTimeout (funktion, forsinkelsestid, arg ...)
Det arg ... parameter står for ethvert argument, som funktionen tager, og forsinkelse skal tilsættes i millisekunder. Nedenfor kan du se et simpelt kodeeksempel, som output “Hej” i konsollen efter 3 sekunder.
setTimeout (funktion () console.log ('hey'), 3000); Enkelt gang setTimeout () begynder at køre, i stedet for at blokere opkaldsstakken indtil den angivne forsinkelsestid er overstået, a timeren udløses, og opkaldstaplen tømmes gradvist til næste meddelelse (svarende til korrespondancen mellem hr. X og hr. H).
Når timeren udløber, en ny besked slutter sig til køen, og hændelsesløkken henter det op, når opkaldsstakken er ledig efter at have behandlet alle meddelelserne før den - så kører koden asynkront.
2. AJAX
AJAX (asynkron JavaScript og XML) er et koncept, der bruger XMLHttpRequest (XHR) API til foretage serveranmodninger og håndtere svarene.
Når browsere foretager serveranmodninger uden at bruge XMLHttpRequest, skal siden opdateres og genoplæser dets brugerflade. Når behandlingen af anmodninger og svar håndteres af XHR API, og UI forbliver upåvirket.
Så i grunden er målet at Lav anmodninger uden side genindlæser. Nu hvor er “asynkron” i denne? Bare ved at bruge XHR-kode (som vi ses i et øjeblik) betyder det ikke, at det er AJAX, fordi XHR API kan arbejde på både synkron og asynkron måde.
XHR som standard er indstillet til arbejde asynkront; når en funktion foretager en anmodning ved hjælp af XHR, det vender tilbage uden at vente på svaret.
Hvis XHR er konfigureret til være synkron, så venter funktionen indtil svar modtages og behandles før de vender tilbage.
Kodeeksempel 1
Dette eksempel præsenterer en XMLHttpRequest objekt oprettelse. Det åben() metode, validerer anmodningswebadressen og den sende() metode sender anmodningen.
var xhr = ny XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Enhver direkte adgang til svardata efter sende() vil være forgæves, fordi sende() venter ikke indtil anmodningen er afsluttet. Husk, at XMLHTTPRequest er sat til at fungere asynkront som standard.
Kodeeksempel 2
Det hej.txt fil i dette eksempel er en simpel tekstfil, der indeholder teksten 'hej'. Det respons Ejendommen til XHR er ugyldig, da den ikke har udgivet teksten 'hej'.
var xhr = ny XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // tom streng XHR implementerer en mikro-rutine som holder kontrol med svar i hver millisekund, og udløser gratis begivenheder For de forskellige stater går en anmodning igennem. Når svaret er indlæst, en belastningsbegivenhed udløses af XHR, som kan levere et gyldigt svar.
var xhr = ny XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // skriver 'hej' til dokumentet Svaret inden for belastningsbegivenheden udgange 'hej', den korrekte tekst.
At gå den asynkrone måde foretrækkes, da den ikke blokkerer andre scripts, indtil anmodningen er afsluttet.
Hvis svaret skal behandles synkront, passerer vi falsk som det sidste argument for åben, hvilken flag XHR API siger det skal være synkron (som standard det sidste argument for åben er rigtigt, som du ikke behøver udtrykkeligt specificere).
var xhr = ny XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // skriver 'hej' for at dokumentere Hvorfor lære alt dette?
Næsten alle begyndere gør nogle fejl med asynkrone koncepter som f.eks setTimeout () og AJAX, for eksempel ved at antage setTimeout () udfører kode efter forsinkelsestiden, eller ved at behandle svar direkte inden for en funktion, der laver en AJAX-anmodning.
Hvis du ved hvordan puslespillet passer, kan du undgå sådan forvirring. Du ved, at forsinkelsestiden i setTimeout () Indikerer ikke tiden når kodekørslen starter, men tiden når timeren udløber og en ny besked er i kø, som kun behandles, når opkaldsstakken er fri til at gøre det.
