Synchrónne a asynchrónne chápanie v jazyku JavaScript - časť 2
V prvej časti tohto príspevku sme zistili, ako koncepty synchrónneho a asynchrónneho sú vnímané v jazyku JavaScript. V tejto druhej časti sa znova objaví pán X, ktorý nám pomôže pochopiť how setTimeout a AJAX API práca.
Zvláštna žiadosť
Poďme sa vrátiť späť k príbehu pána X a filmu, ktorý chcete odísť. Povedzte, že ponecháte úlohu pre pána X pred výletom a povedzte mu, že môže začať pracovať len na tejto úlohe päť hodín po dostal tvoju správu.
On to nie je šťastný, pamätajte, že neberie nové hlásenie, kým sa nekoná so súčasným, a ak vezme vaše, on musí čakať päť hodiny dokonca začať s úlohou. Takže, aby nebola zbytočná časom, on prináša pomocníka, Pán H.
Namiesto čakania požiada pána H nechajte novú správu pre úlohu vo fronte po uplynutí daných hodín a prejde na ďalšiu správu.
Päť hodín minulosti; Pán H aktualizuje frontu s novou správou. Potom, ako spracoval všetky nahromadené správy pred pánom H., pánom X. vykonáva vašu požadovanú úlohu. Takto môžete nechať žiadosť, aby ste boli dodržiavať neskôr, a nečakajte, kým nebude splnená.
Ale prečo pán H nechá správu v rade namiesto toho, aby priamo kontaktoval pána X? Pretože ako som spomenul v prvej časti, iba spôsob, ako kontaktovať pána X je tým, že mu nechá správu prostredníctvom telefonického hovoru - bez výnimiek.
1. The setTimeout () metóda
Predpokladajme, že máte súbor kódu, ktorý chcete vykonať po určitej dobe. Aby ste to mohli spraviť, práve ste zabaliť ju do funkcie, a pridajte ho do a setTimeout () metóda spolu s oneskorením. Syntax jazyka setTimeout () je nasledujúci:
setTimeout (funkcia, čas oneskorenia, arg ...)
arg ... parameter označuje akýkoľvek argument, ktorý daná funkcia trvá, a Oneskorenie-time sa pridáva v milisekundách. Nižšie uvidíte jednoduchý príklad kódu, ktorý obsahuje výstupy “hej” v konzole po 3 sekundách.
setTimeout (funkcia () console.log ('hey'), 3000); akonáhle setTimeout () začne bežať, namiesto zablokovania zásobníka hovorov kým neskončí indikovaný čas oneskorenia, a Časovač sa spustí, a hromada hovorov sa postupne vyprázdňuje pre ďalšiu správu (podobne ako korešpondencia medzi pánom X a pánom H).
Po vypršaní časovača sa zobrazí nová správa sa pripojí k frontu, a cyklus udalostí ju vyberie, keď je zásobník volania po spracovaní všetkých správ pred voľbou voľný - takže kód beží asynchrónne.
2. AJAX
AJAX (asynchrónny JavaScript a XML) je koncept, ktorý používa XMLHttpRequest (XHR) API robiť požiadavky servera a zvládnuť odpovede.
Keď prehliadače robia požiadavky servera bez použitia XMLHttpRequest, stránka sa obnoví a obnoví svoje užívateľské rozhranie. Keď spracovanie žiadostí a odpovedí je spracované XHR API a UI zostáva nedotknuté.
Takže v podstate je cieľom odosielať žiadosti bez znovunačítania stránky. Teraz, kde je “asynchrónne” v tomto? Použitie kódu XHR (ktoré uvidíme v momente) neznamená, že je to AJAX, pretože XHR API pracovať v synchrónnych aj asynchrónnych spôsoboch.
XHR predvolene je nastavené na pracovať asynchrónne; keď funkcia robí žiadosť pomocou XHR, je návrat bez čakania na odpoveď.
Ak je XHR nakonfigurovaný na byť synchrónne, potom funkcia čaká až do odpoveď je prijatá a spracovaná pred návratom.
Príklad kódu 1
Tento príklad predstavuje XMLHttpRequest vytváranie objektov. otvorené() metóda, overí URL žiadosti a send () metóda odošle žiadosť.
var xhr = nový XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Akýkoľvek priamy prístup k údajom o odpovediach po send () bude márne, pretože send () nečaká kým sa žiadosť neskončí. Nezabudnite, že XMLHTTPRequest je predvolene nastavený na asynchrónne fungovanie.
Príklad kódu 2
hello.txt súbor v tomto príklade je jednoduchý textový súbor obsahujúci text "ahoj". odpoveď vlastnosť XHR je neplatná, pretože nevyplnil text "hello".
var xhr = nový XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // prázdny reťazec XHR implementuje mikroúrovni, ktorá neustále kontroluje odpoveď za každú milisekúdu a spúšťa bezplatné udalosti pre rôzne štáty prechádza žiadosť. Po načítaní odpovede, udalosť zaťaženia je spustená XHR, ktorý môže poskytnúť platnú odpoveď.
var xhr = nový XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = funkcia () document.write (this.response) // zapíše "hello" do dokumentu Odozva vnútri udalosti zaťaženia výstupy "ahoj", správny text.
Pohybom asynchrónneho spôsobu sa uprednostňuje, pretože nezabráni ostatným skriptom, kým sa žiadosť neskončí.
Ak má byť odpoveď spracovaná synchronne, prejdeme nepravdivý ako posledný argument z otvorené, ktorý označuje príznak XHR API hovorí to musí byť synchrónne (implicitne posledný argument z otvorené je pravdivý, ktoré nemusíte explicitne špecifikovať).
var xhr = nový XMLHttpRequest (); xhr.open ("GET", "hello.txt", nepravda); xhr.send (); document.write (xhr.response); // píše 'ahoj' na dokument Prečo sa to všetko dozviete?
Takmer všetci začiatočníci robia nejaké chyby s asynchrónnymi koncepciami ako napr setTimeout () a AJAX, napríklad za predpokladu setTimeout () spustí kód po uplynutí času oneskorenia alebo spracovaním odpovede priamo vo funkcii, ktorá robí žiadosť AJAX.
Ak viete, ako sa hodí hádanka, môžete vyhnúť takémuto zmätku. Viete, že oneskorenie v čase setTimeout () neuvádza čas pri spustení spustenia kódu, ale čas keď vyprší časovač a nová správa je zaradená do frontu, ktorá sa spracuje iba vtedy, keď je zásobník volania slobodný.
