Înțelegerea funcțiilor sincrone și asincrone în JavaScript - Partea 2
În prima parte a acestui post, am văzut cum concepte de sincronă și asincronă sunt percepute în JavaScript. În această a doua parte, domnul X apare din nou pentru a ne ajuta să înțelegem cum setTimeout și AJAX API-uri muncă.
O cerere ciudată
Să ne întoarcem înapoi la povestea domnului X și a filmului pentru care doriți să plecați. Spuneți că lăsați o sarcină pentru dl X înainte de plecare și spuneți-i că nu poate decât să înceapă să lucreze la această sarcină cinci ore după ți-a primit mesajul.
Nu este fericit, nu uita că nu recepționează un mesaj nou până când nu se termină cu cel actual, iar dacă el ia a ta, el trebuie să aștepte cinci ore pentru a începe chiar și cu sarcina. Deci, ca să nu fiți risipiți de timp, el aduce un ajutor, Dl H.
În loc să aștepte, îl întreabă pe domnul H lăsați un mesaj nou pentru sarcina din coadă după ce au trecut orele respective și se îndreaptă spre mesajul următor.
Cinci ore înainte; Dl H actualizează coada de așteptare cu un nou mesaj. După ce a terminat procesarea tuturor mesajelor acumulate înainte de domnul H, domnul X îndeplinește sarcina solicitată. Deci, în acest fel, puteți lăsa o cerere să fie respectate ulterior, și nu așteptați până se va împlini.
Dar de ce domnul H lasă un mesaj în coadă, în loc să contacteze direct pe domnul X? Deoarece, așa cum am menționat în prima parte, numai modalitatea de a contacta domnul X este lăsându-i un mesaj prin apel telefonic - fără excepții.
1. The setTimeout () metodă
Să presupunem că aveți un set de cod pe care doriți să îl faceți executați după un anumit timp. Pentru a face asta, doar tu înfășurați-o într-o funcție, și adăugați-l la a setTimeout () metodă împreună cu timpul de întârziere. Sintaxa lui setTimeout () este după cum urmează:
setTimeout (funcție, întârziere-timp, arg ...)
arg ... parametrul reprezintă orice argument pe care îl are funcția și timp de intarziere se adaugă în milisecunde. Mai jos puteți vedea un exemplu de cod simplu, care iese “Hei” în consola după 3 secunde.
setTimeout (funcția () console.log ('hey'), 3000); O singura data setTimeout () începe să ruleze, în loc să blocheze stiva de apeluri până la depășirea timpului de întârziere indicat, a cronometrul este declanșat, iar stiva de apel este golită treptat pentru mesajul următor (similar cu corespondența dintre dl X și dl H).
Când expiră cronometrul, un mesaj nou se alătură coadă, iar buclă de evenimente o preia atunci când stiva de apel este gratuită după procesarea tuturor mesajelor înaintea ei - astfel codul rulează asincron.
2. AJAX
AJAX (Asynchronous JavaScript and XML) este un concept care utilizează XMLHttpRequest (XHR) API la face cererile serverului și gestiona răspunsurile.
Atunci când browserele fac cereri de server fără a utiliza XMLHttpRequest, Pagina se actualizează și își reîncarcă UI-ul. Când procesarea cererilor și a răspunsurilor este tratată de API-ul XHR și UI rămâne neafectat.
Deci, scopul este de fapt efectuați solicitări fără reîncărcarea paginilor. Acum, unde este “asincron” in acest? Doar folosind codul XHR (pe care îl vom vedea într-o clipă) nu înseamnă că este AJAX, deoarece API-ul XHR poate lucrează atât în moduri sincrone cât și asincrone.
XHR în mod implicit este setat sa lucrați asincron; atunci când o funcție face o cerere folosind XHR, ea se întoarce fără să aștepte răspunsul.
Dacă XHR este configurat să fi sincron, atunci funcția așteaptă până la răspunsul este primit și procesat înainte de a reveni.
Exemplu de cod 1
Acest exemplu prezintă un XMLHttpRequest crearea de obiecte. deschis() validă adresa URL a solicitării și trimite() metoda trimite cererea.
var xhr = noul XMLHttpRequest (); xhr.open ("GET", adresa URL); xhr.send (); Orice acces direct la datele de răspuns după trimite() va fi în zadar, pentru că trimite() nu așteaptă până la finalizarea solicitării. Rețineți că XMLHTTPRequest este setat să funcționeze în mod asincron în mod implicit.
Exemplu de cod 2
hello.txt fișierul din acest exemplu este un fișier text simplu care conține textul "salut". raspuns proprietatea XHR nu este validă, deoarece nu a afișat textul "salut".
var xhr = noul XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // Șir gol XHR implementează o micro-rutină care continuă să verifice răspunsul în fiecare milisecundă și declanșează evenimente complementare pentru diferitele state, o cerere trece prin. Când răspunsul este încărcat, un eveniment de încărcare este declanșat de XHR, care poate oferi un răspuns valid.
var xhr = noul XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // scrie 'hello' la document Răspunsul în interiorul evenimentului de încărcare ieșiri "salut", textul corect.
Deplasarea în modul asincron este preferată, deoarece nu blochează alte script-uri până când cererea nu este finalizată.
Dacă răspunsul trebuie procesat în mod sincron, trecem fals ca ultimul argument al lui deschis, care indică API-ul XHR spunând asta trebuie să fie sincron (implicit ultimul argument din deschis este Adevărat, pe care nu trebuie să le specificați în mod explicit).
var xhr = noul XMLHttpRequest (); xhr.open ("GET", "hello.txt", fals); xhr.send (); document.write (xhr.response); // scrie "hello" pentru a documenta De ce să învățăm toate astea?
Aproape toți începătorii fac unele greșeli cu concepte asincrone, cum ar fi setTimeout () și AJAX, de exemplu, presupunând setTimeout () execută cod după timpul de întârziere sau procesând răspunsul direct în interiorul unei funcții care face o solicitare AJAX.
Dacă știi cum se potrivește puzzle-ul, poți evitați confuzia. Știți că timpul de întârziere în setTimeout () nu indică timpul când începe execuția codului, dar timpul când expiră cronometrul iar un mesaj nou este în coada de așteptare, care va fi procesat numai atunci când stiva de apel este liberă să facă acest lucru.
