Pochopení synchronních a asynchronních v JavaScriptu - část 2
V první části tohoto příspěvku jsme viděli, jak pojmy synchronní a asynchronní jsou vnímány v JavaScriptu. V této druhé části se opět objevuje pan X, aby nám pomohl pochopit jak setTimeout a AJAX API práce.
Zvláštní žádost
Vraťme se zpět k příběhu pana X a filmu, do kterého chcete odjet. Řekni, že necháš úkol pro pana X před výletem a řekni mu, že na tomto úkolu může začít pracovat pět hodin po dostal vaši zprávu.
Není z toho šťastný, pamatujte si, že nebere nové poselství, dokud se neskončí s tím pravým, a pokud vás vezme, musí počkat Pět hodin dokonce začít na úkol. Takže, aby nebyl plýtvání časem, on přináší pomocníka, Pane H.
Místo čekání čeká na pana H zanechte novou zprávu pro úkol ve frontě po uplynutí uvedených hodin a přejde na další zprávu.
Pěti hodin; Pane H aktualizuje frontu s novou zprávou. Poté, co provedl zpracování všech nashromážděných zpráv před panem H., panem X. \ t provede Vámi požadovaný úkol. Tímto způsobem můžete nechat žádost později, a nečekejte, dokud nebude splněna.
Proč však pan H zanechává vzkaz ve frontě místo přímého kontaktu s panem X? Protože jak jsem zmínil v první části, pouze kontaktovat pana X je zanecháním vzkazu přes telefonní hovor - žádné výjimky.
1. setTimeout () metoda
Předpokládejme, že máte sadu kódů, kterou chcete po určité době. Abys to udělal, prostě zabalit do funkce, a přidejte ji do setTimeout () metoda spolu s dobou zpoždění. Syntaxe setTimeout () je následující:
setTimeout (funkce, zpoždění, arg…)
arg… Parametr znamená libovolný argument, který funkce trvá, a zpoždění má být přidáno v milisekundách. Níže vidíte jednoduchý příklad kódu, který vystupuje “Ahoj” v konzole po 3 sekundách.
setTimeout (function () console.log ('hey'), 3000); Jednou setTimeout () začne běžet, místo blokování zásobníku volání dokud neuplyne uvedená doba zpoždění, a časovač je spuštěn, a zásobník volání se postupně vyprázdní pro další zprávu (podobně jako korespondence mezi panem X a panem H).
Po vyprąení časovače nová zpráva připojí frontu, a smyčka události jej zvedne, když je zásobník volání volný po zpracování všech zpráv před ním - kód tedy běží asynchronně.
2. AJAX
AJAX (Asynchronní JavaScript a XML) je koncept, který používá XMLHttpRequest (XHR) API provádět požadavky serveru a zpracovat odpovědi.
Když prohlížeče dělají serverové požadavky bez použití XMLHttpRequest, stránka se aktualizuje a znovu načte své uživatelské rozhraní. Při zpracování žádostí a odpovědí zpracovává XHR API a Uživatelské rozhraní zůstává nedotčeno.
Takže v podstatě je cílem provádět požadavky bez opětovného načtení stránky. Kde je “asynchronní” v tomhle? Jen pomocí XHR kódu (který uvidíme v okamžiku) neznamená, že je to AJAX, protože XHR API může pracovat jak synchronně, tak asynchronně.
XHR ve výchozím stavu je nastavena na pracovat asynchronně; když funkce provede požadavek pomocí XHR, to vrátí bez čekání na odpověď.
Pokud je XHR nakonfigurován na být synchronní, pak funkce čeká, až se odpověď přijata a zpracována před návratem.
Kód Příklad 1
Tento příklad představuje XMLHttpRequest vytvoření objektu. otevřeno() metodu, ověřuje URL požadavku a poslat() odešle požadavek.
var xhr = nová XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Jakýkoli přímý přístup k datům odpovědí po poslat() bude marné, protože poslat() nečeká dokud není požadavek dokončen. Nezapomeňte, že XMLHTTPRequest je standardně nastaven na asynchronní práci.
Příklad kódu 2
hello.txt soubor v tomto příkladu je jednoduchý textový soubor obsahující text 'hello'. Odezva vlastnost XHR je neplatná, protože nevypisovala text „hello“.
var xhr = nová XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // prázdný řetězec XHR implementuje mikro-rutinu udržuje kontrolu odezvy v každé milisekundě a spouští bezplatné akce pro jednotlivé státy prochází požadavek. Když je načtena odpověď, událost XHR spustí událost zatížení, které mohou přinést platnou odpověď.
var xhr = nová XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // zapíše do dokumentu 'hello' Odezva uvnitř události zatížení výstupy 'ahoj', správný text.
Je preferován asynchronní způsob, protože neblokuje další skripty, dokud není požadavek dokončen.
Pokud musí být odpověď zpracována synchronně, projdeme Nepravdivé jako poslední argument otevřeno, který příznaky XHR API říká to musí být synchronní (standardně poslední argument otevřeno je skutečný, které nemusíte explicitně specifikovat).
var xhr = nová XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // píše 'ahoj' do dokumentu Proč se to všechno učit?
Téměř všichni začátečníci dělají nějaké chyby s asynchronními pojmy takový jak setTimeout () a AJAX, například za předpokladu setTimeout () provede kód po zpoždění, nebo zpracováním odpovědi přímo uvnitř funkce, která vytvoří požadavek AJAX.
Pokud víte, jak se puzzle hodí, můžete vyhnout se takovému zmatku. Víte, že zpoždění v setTimeout () neindikuje čas při spuštění kódu, ale čas když časovač vyprší a nová zpráva je zařazena do fronty, která bude zpracována pouze v případě, že to má zásobník volání.
