A szinkron és aszinkron megértése a JavaScript - 2. részében
A bejegyzés első részében láttuk, hogy a a szinkron és aszinkron fogalmak észleltek JavaScript-ben. Ebben a második részben X újra megjelenik, hogy segítsen megérteni a setTimeout és az AJAX API-k munka.
Páratlan kérés
Térjünk vissza az X-es történethez és az elhagyni kívánt filmhez. Mondja el, hogy a kirándulás előtt hagyja a feladatot X úrnak, és mondja meg neki, hogy csak ezt a feladatot kezdheti meg öt óra után megkapta az üzenetét.
Nem örül róla, ne feledje, hogy nem vesz új üzenetet, amíg az aktuálisval nem történik meg, és ha elviszi a tiédet, várnia kell öt órák elkezdeni a feladatot. Tehát, hogy ne pazarolja az időt, ő segítőt hoz, H.
Ahelyett, hogy várná, felkéri H-t hagyjon új üzenetet a sorban lévő feladathoz az adott óra elteltével, és továbblép a következő üzenetre.
Öt óra múlva; H frissíti a várólistát új üzenettel. Miután elvégezte az összes felhalmozott üzenet feldolgozását, mielőtt H. úr, X elvégzi a kért feladatot. Tehát így hagyhatsz kérést később betartották, és ne várjon, amíg nem teljesül.
De miért hagyja H úr üzenetet a sorban ahelyett, hogy közvetlenül kapcsolatba lépne X-vel? Mert ahogy az első részben említettem, a csak X kapcsolatfelvétel módja egy üzenetet hagyva neki telefonon keresztül - kivétel nélkül.
1. A setTimeout () eljárás
Tegyük fel, hogy van egy olyan kódja, amelyet szeretne végrehajtani egy bizonyos idő után. Annak érdekében, hogy ezt megtehessétek tekerje be egy funkcióba, és add hozzá a setTimeout () eljárás a késleltetési idővel együtt. A szintaxis setTimeout () az alábbiak:
setTimeout (funkció, késleltetési idő, arg…)
A arg ... a paraméter minden olyan argumentumot jelent, amelyet a függvény vesz igénybe, és késési idő hozzá kell adni milliszekundumban. Az alábbiakban egy egyszerű kód példát láthatsz, amely kimenetek “Hé” 3 másodperc múlva a konzolban.
setTimeout (funkció () console.log ('hey'), 3000); Egyszer setTimeout () elindul, a hívás verem blokkolása helyett amíg a jelzett késleltetési idő lejár, a időzítő bekapcsol, és a hívás verem fokozatosan kiürül a következő üzenethez (hasonlóan X és H úr közötti levelezéshez).
Amikor az időzítő lejár, egy új üzenet jelenik meg csatlakozik a sorhoz, és az eseményhurok felveszi azt, amikor a hívás verem szabad az összes üzenet feldolgozása előtt - így a kód aszinkron módon fut.
2. AJAX
Az AJAX (aszinkron JavaScript és XML) egy olyan fogalom, amely a XMLHttpRequest (XHR) API-hoz szerver kéréseket és kezelje a válaszokat.
Amikor a böngészők az XMLHttpRequest, a az oldal frissül és újratölti felhasználói felületét. Amikor a kérések és válaszok feldolgozását az XHR API kezeli, és A felhasználói felület változatlan marad.
Tehát alapvetően a cél az, hogy kérjen lap nélküli újratöltéseket. Most, hol van a “aszinkron” ebben? Csak az XHR kód használatával (amit látni fogunk egy pillanat alatt) nem jelenti azt, hogy az AJAX, mert az XHR API képes mind szinkron, mind aszinkron módon működik.
XHR alapértelmezés szerint beállítása aszinkron módon dolgozzon; ha egy függvény az XHR használatával kéri a kérést visszatér a várakozás nélkül.
Ha az XHR konfigurálva van legyen szinkron, majd a függvény várakozik, amíg a válasz érkezik és feldolgozott visszatérés előtt.
Kód 1. példa
Ez a példa egy XMLHttpRequest objektum létrehozása. A nyisd ki() módszert, érvényesíti a kérés URL-jét, és a elküld() a módszer elküldi a kérést.
var xhr = új XMLHttpRequest (); xhr.open ("GET", url); xhr.send () eljárást; A válaszadatok közvetlen elérése után elküld() hiába lesz, mert elküld() nem vár amíg a kérés befejeződik. Ne feledje, hogy az XMLHTTPRequest alapértelmezés szerint aszinkron módon működik.
Kód 2. példa
A hello.txt ebben a példában egy egyszerű szöveges fájl, amely a „hello” szöveget tartalmazza. A válasz Az XHR tulajdonsága érvénytelen, mivel a „hello” szöveget nem adja ki.
var xhr = új XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send () eljárást; document.write (xhr.response); // üres karakterlánc Az XHR egy mikro-rutint alkalmaz folyamatosan ellenőrzi a választ minden milliszekundumban, és ingyenes eseményeket indít a különböző államok esetében a kérelem áthalad. Amikor a válasz betöltődik, az XHR egy terhelési eseményt indít, amely érvényes választ adhat.
var xhr = új XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send () eljárást; xhr.onload = function () document.write (this.response) // írja a „hello” szót a dokumentumhoz A válasz a terhelési eseményen belül kimenet 'hello', a helyes szöveget.
Előnyös az aszinkron úton haladni, mivel nem blokkolja a többi szkriptet, amíg a kérés befejeződik.
Ha a választ szinkronban kell feldolgozni, akkor elhaladunk hamis mint az utolsó érv nyisd ki, melyik jelzi az XHR API-t mondván szinkronnak kell lennie (alapértelmezés szerint az utolsó érv nyisd ki jelentése igaz, melyet nem kell kifejezetten megadnia).
var xhr = új XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send () eljárást; document.write (xhr.response); // írja a "hello" -ot a dokumentáláshoz Miért tanulj mindezt?
Majdnem minden kezdő kezd hibázni aszinkron fogalmakkal, mint például setTimeout () és AJAX, például feltételezve setTimeout () végrehajtja a kódot a késleltetési idő után, vagy a válasz közvetlenül az AJAX-kérést végrehajtó függvényben.
Ha tudod, hogyan illik a puzzle elkerülni az ilyen zavart. Tudod, hogy a késleltetési idő setTimeout () nem jelzi az időt amikor a kód végrehajtása megkezdődik, de az idő amikor az időzítő lejár és egy új üzenet sorban áll, amely csak akkor fog feldolgozni, ha a hívás verem szabadon megteheti.
