Synkronisen ja asynkronisen ymmärtäminen JavaScriptissä - Osa 2
Tämän viestin ensimmäisessä osassa näimme, miten synkronisen ja asynkronisen käsitteen havaitaan JavaScriptissä. Tässä toisessa osassa X ilmestyy uudelleen auttamaan meitä ymmärtämään miten setTimeout ja AJAX API työ.
Pariton pyyntö
Kääntykää takaisin X: n tarinaan ja elokuvaan, jonka haluat lähteä. Sano, että jätät tehtävän X: lle ennen retkiä ja kerro hänelle, että hän voi aloittaa vain tämän tehtävän käsittelyn viisi tuntia jälkeen hän sai viestisi.
Hän ei ole tyytyväinen siihen, muista, että hän ei ota uutta viestiä, ennen kuin hänet tehdään nykyisen kanssa, ja jos hän ottaa sinun, hän täytyy odottaa viisi tuntia jopa aloittaa tehtävän. Joten, jotta se ei olisi ajanhukkaa, hän tuo auttajan, H.
Odottamisen sijaan hän pyytää herraa H jätä uusi viesti jonossa olevaan tehtävään sen jälkeen, kun annettu tunti oli kulunut, ja siirtyy seuraavaan viestiin.
Viisi tuntia aiemmin; H päivittää jonon uudella viestillä. Kun hän on suorittanut kaikki kertyneet viestit ennen H: n, X: n käsittelyä suorittaa pyydetyn tehtävän. Näin voit jättää pyynnön myöhemmin, ja älä odota, kunnes se on täytetty.
Mutta miksi H jättää viestin jonoon suoraan ottamatta yhteyttä X: ään? Koska kuten mainitsin ensimmäisessä osassa, vain tapa ottaa yhteyttä herra X: hen jättämällä hänelle viestin puhelimitse - ei poikkeuksia.
1. The setTimeout () menetelmä
Oletetaan, että sinulla on joukko koodia, jonka haluat suorittaa tietyn ajan kuluttua. Jotta voisit tehdä sen, te vain kääri se funktioon, ja lisää se a setTimeout () menetelmä viiveen kanssa. Syntaksi setTimeout () on seuraava:
setTimeout (toiminto, viive-aika, arg…)
arg ... parametri tarkoittaa mitä tahansa argumenttia, jonka funktio ottaa, ja viiveaika lisätään millisekunteina. Alla näet yksinkertaisen koodin esimerkin “Hei” konsolissa 3 sekunnin kuluttua.
setTimeout (toiminto () console.log ('hey'), 3000); Kerran setTimeout () alkaa, puhelun pinon estämisen sijaan kunnes osoitettu viiveaika on ohi, a ajastin laukeaa, ja puhelunippu tyhjennetään vähitellen seuraavaan viestiin (samoin kuin X: n ja H: n välinen kirjeenvaihto).
Kun ajastin vanhenee, uusi viesti liittyy jonoon, ja tapahtuma-silmukka poimii sen, kun puhelunippu on vapaa sen jälkeen, kun kaikki sen sanomat on käsitelty - näin koodi toimii asynkronisesti.
2. AJAX
AJAX (Asynchronous JavaScript ja XML) on käsite, joka käyttää XMLHttpRequest (XHR) API tehdä palvelinpyyntöjä ja käsittele vastauksia.
Kun selaimet tekevät palvelinpyynnöt käyttämättä XMLHttpRequestiä, sivu päivittyy ja lataa UI: n. Kun XHR API käsittelee pyyntöjen ja vastausten käsittelyä, ja UI pysyy ennallaan.
Joten pohjimmiltaan tavoitteena on tehdä pyyntöjä ilman sivun uudelleenlatauksia. Nyt, missä on “asynkroninen” Tässä? Vain käyttämällä XHR-koodia (jota näemme hetkessä) ei tarkoita, että se on AJAX, koska XHR API voi toimivat sekä synkronisesti että asynkronisesti.
XHR oletuksena on asetettu toimi asynkronisesti; kun toiminto tekee pyynnön XHR: n avulla, se palaa odottamatta vastausta.
Jos XHR on määritetty olla synkroninen, sitten toiminto odottaa kunnes vastaus vastaanotetaan ja käsitellään ennen palauttamista.
Koodi Esimerkki 1
Tässä esimerkissä esitetään XMLHttpRequest objektin luominen. avata() menetelmä, validoi pyynnön URL-osoitteen ja lähettää() menetelmä lähettää pyynnön.
var xhr = uusi XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Mahdollinen suora yhteys vastaustietoihin sen jälkeen lähettää() on turhaan, koska lähettää() ei odota kunnes pyyntö on valmis. Muista, että XMLHTTPRequest on asetettu toimimaan asynkronisesti oletusarvoisesti.
Koodi Esimerkki 2
hello.txt tässä esimerkissä oleva tiedosto on yksinkertainen tekstitiedosto, joka sisältää tekstin "hello". vastaus XHR: n ominaisuus on virheellinen, koska se ei lähettänyt tekstiä "hello".
var xhr = uusi XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // tyhjä merkkijono XHR toteuttaa mikro-rutiinin pitää tarkistaa vastauksen joka millisekunnissa, ja laukaisee ilmaisia tapahtumia eri valtioiden osalta pyyntö menee läpi. Kun vastaus on ladattu, XHR käynnistää kuormitustapahtuman, jotka voivat antaa kelvollisen vastauksen.
var xhr = uusi XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // kirjoittaa "hei" asiakirjaan Vastaus kuormitustapahtuman sisällä antaa "hei", oikean tekstin.
Asynkroninen tapa on edullinen, koska se ei estä muita skriptejä, ennen kuin pyyntö on valmis.
Jos vastaus on käsiteltävä synkronisesti, siirrymme väärä viimeisenä väitteenä avata, joka merkitsee XHR API: n sanoen sen täytyy olla synkroninen (oletusarvoisesti viimeisin argumentti avata on totta, jota et tarvitse nimenomaisesti määritellä).
var xhr = uusi XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // kirjoittaa asiakirjan "hello" Miksi oppia kaiken tämän?
Lähes kaikki aloittelijat tekevät virheitä asynkronisilla käsitteillä, kuten setTimeout () ja AJAX, esimerkiksi olettaen, että setTimeout () suorittaa koodin viiveajan jälkeen tai käsittelemällä vastausta suoraan AJAX-pyyntöä suorittavan toiminnon sisällä.
Jos tiedät, miten palapeli sopii, voit välttää tällainen sekaannus. Tiedätkö, että viive on setTimeout () ei ilmoita aikaa kun koodin suorittaminen alkaa, mutta aika kun ajastin vanhenee ja uusi viesti on jonossa, jota käsitellään vain, kun puheluippu on vapaa.
