Forstå synkron og asynkron i JavaScript - Del 2
I første del av dette innlegget så vi hvordan konsepter synkron og asynkron oppfattes i JavaScript. I denne andre delen ser X frem igjen for å hjelpe oss å forstå hvordan setTimeout og AJAX APIer arbeid.
En merkelig forespørsel
La oss spole tilbake til historien om Mr X og filmen du vil forlate for. Si at du forlater en oppgave for Mr X før utfarten, og fortelle ham at han bare kan begynne å jobbe med denne oppgaven fem timer etter han fikk beskjeden din.
Han er ikke glad for det, husk, han tar ikke en ny melding før han er ferdig med den nåværende, og hvis han tar din, må vente på fem timer å til og med starte på oppgaven. Så, for ikke å være sløsing med tid, han bringer inn en hjelper, Hr. H.
I stedet for å vente spør han H til Legg igjen en ny melding for oppgaven i køen etter at de angitte timene var gått, og går videre til neste melding.
Fem timer forbi; Hr. H oppdaterer køen med en ny melding. Etter at han er ferdig med å behandle alle påløpte meldinger før hr. H, Mr X utfører den forespurte oppgaven. Så, på denne måten, kan du forlate en forespørsel om å være overholdt på et senere tidspunkt, og ikke vent til det er oppfylt.
Men hvorfor forlater H H en melding i køen i stedet for å kontakte X direkte? Fordi som jeg nevnte i første del, bare måte å kontakte mr x er ved å legge igjen en melding til ham via telefonsamtale - ingen unntak.
1. Den setTimeout () metode
Anta at du har et sett med kode du vil utføre etter en viss tid. For å gjøre det, bare du pakk den inn i en funksjon, og legg det til en setTimeout () metode sammen med forsinkelsestiden. Syntaxen til setTimeout () er som følgende:
setTimeout (funksjon, forsinkelsestid, arg ...)
De arg ... parameteren står for ethvert argument som funksjonen tar, og forsinkelsestid skal legges i millisekunder. Nedenfor kan du se et enkelt kodeeksempel, som utganger “Hei” i konsollen etter 3 sekunder.
setTimeout (funksjon () console.log ('hey'), 3000); En gang setTimeout () begynner å løpe, i stedet for å blokkere anropsstakken inntil den angitte forsinkelsestiden er over, a timeren utløses, og anropsstakken blir gradvis tømt for neste melding (tilsvarende korrespondansen mellom Mr X og Mr H).
Når timeren utløper, en ny melding slutter seg til køen, og hendelsessløyfen plukker den opp når anropsstakken er ledig etter at alle meldingene er behandlet før den - dermed kjører koden asynkront.
2. AJAX
AJAX (asynkron JavaScript og XML) er et konsept som bruker XMLHttpRequest (XHR) API til gjør serverforespørsler og håndtere svarene.
Når nettlesere gjør serverforespørsler uten å bruke XMLHttpRequest, vil siden oppdateres og Oppdaterer brukergrensesnittet. Når behandlingen av forespørsler og svar håndteres av XHR API, og UI forblir upåvirket.
Så, i utgangspunktet er målet å Lag forespørsler uten sideopplasting. Nå, hvor er det “asynkron” i dette? Bare å bruke XHR-kode (som vi ser på et øyeblikk) betyr ikke at det er AJAX, fordi XHR API kan arbeid på både synkron og asynkron måte.
XHR som standard er satt til arbeid asynkront; når en funksjon gjør en forespørsel ved hjelp av XHR, den returnerer uten å vente på svaret.
Hvis XHR er konfigurert til være synkron, så venter funksjonen til svar mottas og behandles før retur.
Kodeeksempel 1
Dette eksemplet presenterer en XMLHttpRequest objekt opprettelse. De åpen() metode, validerer forespørselsadressen, og sende() Metoden sender forespørselen.
var xhr = ny XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Eventuell direkte tilgang til svardata etter sende() vil være forgjeves, fordi sende() venter ikke til forespørselen er fullført. Husk at XMLHTTPRequest er satt til å fungere asynkront som standard.
Kodeeksempel 2
De hello.txt fil i dette eksemplet er en enkel tekstfil som inneholder teksten 'hallo'. De respons Egenskapen til XHR er ugyldig, siden den ikke skrev ut teksten 'hallo'.
var xhr = ny XMLHttpRequest (); xhr.open ("GET", "hei.txt"); xhr.send (); document.write (xhr.response); // tom streng XHR implementerer en mikrorutine som fortsetter å sjekke svaret i hver millisekund, og utløser gratis hendelser For de forskjellige statene går en forespørsel gjennom. Når svaret er lastet, en lasthendelse utløses av XHR, som kan levere et gyldig svar.
var xhr = ny XMLHttpRequest (); xhr.open ("GET", "hei.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // skriver "hallo" til dokumentet Svaret i belastningsbegivenheten utganger "hallo", den riktige teksten.
Å gå på asynkron måte er foretrukket, da den ikke blokkerer andre skript til forespørselen er fullført.
Hvis svaret må behandles synkront, passerer vi falsk som det siste argumentet til åpen, hvilken flagg XHR API sier det må være synkron (som standard det siste argumentet for åpen er ekte, som du ikke trenger spesifikt spesifisere).
var xhr = ny XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // skriver 'hei' for å dokumentere Hvorfor lære alt dette?
Nesten alle nybegynnere gjør noen feil med asynkrone konsepter som setTimeout () og AJAX, for eksempel ved å anta setTimeout () kjører kode etter forsinkelsestiden, eller ved å behandle svar direkte i en funksjon som lager en AJAX-forespørsel.
Hvis du vet hvordan puslespillet passer, kan du unngå slik forvirring. Du vet at forsinkelsestiden i setTimeout () Indikerer ikke tiden når kodekjøringen starter, men tiden når timeren utløper og en ny melding er i kø, som bare blir behandlet når anropsstakken er ledig til å gjøre det.
