Sünkroonse ja asünkroonse mõistmine JavaScriptis - 2. osa
Selle postituse esimeses osas nägime, kuidas sünkroonse ja asünkroonse kontseptsiooni tatakse JavaScriptis. Selles teises osas ilmub taas X, et aidata meil mõista kuidas setTimeout ja AJAX API-d tööd.
Paaritu taotlus
Pöördume tagasi härra X ja selle filmi juurde, mida soovite lahkuda. Ütle, et jätate härra X-le ülesande enne väljasõitu ja ütle talle, et ta saab alustada ainult selle ülesande täitmisega viis tundi pärast seda ta sai teie sõnumi.
Ta ei ole selle pärast õnnelik, pidage meeles, et ta ei võta uut sõnumit, kuni ta ei tee seda praegusega, ja kui ta võtab sinu, siis peab ootama viis tundi isegi ülesande alustamiseks. Niisiis, et mitte aega raisata, ta toob abimees, H.
Ootamise asemel palub ta härra H jätke järjekorda uus ülesanne pärast antud tunni möödumist ja liigub järgmisele sõnumile.
Viis tundi varem; H värskendab järjekorda uue sõnumiga. Pärast seda, kui ta on töötanud kõik kogunenud sõnumid enne H-i, hr X-i täidab teie soovitud ülesande. Niisiis, saate jätta päringu hiljem, ja ära oodake, kuni see on täidetud.
Aga miks härra H jätab sõnumi järjekorda, selle asemel et pöörduda otse Xi poole? Sest nagu ma mainisin esimeses osas, ainult viis X-ga ühendust võtta jättes talle sõnumi telefonikõne kaudu - erandeid ei ole.
1. setTimeout () meetod
Oletame, et teil on soovitud kood täitke teatud aja möödudes. Selleks, et seda teha, sa lihtsalt murdke see funktsioonisse, ja lisage see a-le setTimeout () meetod koos viivitusajaga. Süntaks setTimeout () on järgmine:
setTimeout (funktsioon, viivitusaeg, arg…)
The arg… parameeter tähistab mis tahes argumenti, mida funktsioon võtab, ja hilinemisaeg lisatakse millisekundites. Allpool näete lihtsat koodide näidet, mis väljendab “hei” konsooli pärast 3 sekundit.
setTimeout (funktsioon () console.log ('hey'), 3000); Üks kord setTimeout () hakkab jooksma, kõne stacki blokeerimise asemel kuni näidatud viivitusaeg on möödas, a käivitub taimer, ja kõne stack tühistatakse järk-järgult järgmise sõnumi jaoks (sarnaselt hr X ja H vahelise kirjavahetusega).
Kui taimer on aegunud, saate uue sõnumi liitub järjekorraga, ja sündmussilmus tõmbab selle üles, kui kõne korstnat on vaba pärast seda, kui kõik enne seda olnud sõnumid on töödeldud - seega töötab kood asünkroonselt.
2. AJAX
AJAX (asünkroonne JavaScript ja XML) on mõiste, mis kasutab XMLHttpRequest (XHR) API teha serveri taotlusi ja käsitsege vastuseid.
Kui brauserid teevad serveritaotlusi ilma XMLHttpRequest'i kasutamata, siis lehekülg värskendab ja laadib oma kasutajaliidese uuesti. Kui päringute ja vastuste töötlemist teostab XHR API ja UI jääb muutmata.
Niisiis, põhimõtteliselt on eesmärk teha taotlusi ilma lehe uuesti laadimisteta. Nüüd, kus on “asünkroonne” selles? Lihtsalt kasutades XHR koodi (mida me näeme hetkega) ei tähenda see AJAXi, sest XHR API saab töötada nii sünkroonsel kui ka asünkroonsel viisil.
XHR vaikimisi on seatud töötada asünkroonselt; kui funktsioon teeb taotluse XHR-i abil, siis see naaseb, ootamata vastust.
Kui XHR on konfigureeritud olema sünkroonne, siis ootab funktsioon kuni Vastus võetakse vastu ja töödeldakse enne naasmist.
Koodi näide 1
See näide esitab XMLHttpRequest objekti loomine. The avatud () meetod, kinnitab päringu URL-i ja saada() meetod saadab taotluse.
var xhr = uus XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Mis tahes otsene juurdepääs vastuse andmetele pärast saada() on asjata, sest saada() ei oota kuni taotlus on lõpule viidud. Pidage meeles, et XMLHTTPRequest seadistatakse vaikimisi asünkroonseks.
Koodi näide 2
The hello.txt See näide on lihtne tekstifail, mis sisaldab teksti „hello“. The vastus XHRi omadus on kehtetu, kuna see ei edastanud teksti „tere”.
var xhr = uus XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // tühi string XHR rakendab seda jätkab vastuste kontrollimist igal millisekundil ja käivitab tasuta sündmusi erinevate riikide puhul läbib taotlus. Kui vastus on laetud, XHR käivitab koormusjuhtumi, mis suudavad anda kehtiva vastuse.
var xhr = uus XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // kirjutab dokumendile "hello" Vastus koormusürituse sees väljendab "tere", õige tekst.
Eelistatud on asünkroonse tee liikumine, kuna see ei blokeeri muid skripte enne, kui päring on lõpule viidud.
Kui vastus tuleb töödelda sünkroonselt, siis me läbime vale viimane argument avatud, mis tähistab XHR API-d öeldes seda peab olema sünkroonne (vaikimisi viimane argument avatud on tõsi, mida sa ei pea selgesõnaliselt täpsustama).
var xhr = uus XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // kirjutab dokumendile "tere" Miks seda kõike õppida?
Peaaegu kõik algajad teevad vigu asünkroonsete mõistetega, näiteks setTimeout () ja AJAX, näiteks eeldades setTimeout () täidab koodi pärast viivitusaega või töötades vastuse otse AJAX-i päringu tegeva funktsiooni sees.
Kui sa tead, kuidas puzzle sobib, võite seda teha vältida sellist segadust. Sa tead, et viivitusaeg on setTimeout () ei näita aega koodi käivitamisel, kuid aeg kui taimer aegub ja uus sõnum on järjekorras, mida töödeldakse ainult siis, kui kõne korstnat saab seda teha.
