Înțelegerea JavaScript sincron și asincron - partea 1

sincronic și asincron sunt concepte confuze în JavaScript, mai ales pentru începători. Două sau mai multe lucruri sunt sincronic atunci când acestea se întâmplă în același timp (în sincronizare) și asincronă atunci când nu (nu se sincronizează).

Deși aceste definiții sunt ușor de luat, este de fapt mai complicat decât pare. Trebuie să luăm în considerare exact ce sunt în sincronizare, și ce nu sunt.

Probabil ați sunat a normal funcționează în JavaScript sincron, nu? Și dacă e ceva asemănător setTimeout () sau AJAX cu care lucrați, vă veți referi la acesta ca fiind asincron, da? Dacă îți spun asta ambii sunt asincrone într-un fel?

Pentru a explica De ce, trebuie să ne întoarcem la domnul X pentru ajutor.

Scenariul 1 - Domnul X încearcă sincronizarea

Iată configurația:

1. Dl X este o persoană care poate răspunde la întrebări dificile și poate îndeplini orice sarcină solicitată.
2. Singura modalitate de a lua legătura cu el este printr-un apel telefonic.
3. Oricare ar fi întrebarea sau sarcina pe care o aveți, pentru a solicita ajutorul domnului X să îl realizați; îl sunați.
4. Dl X vă dă răspunsul sau completează sarcina imediat, și vă permite să știți este gata.
5. Așezați receptorul la conținut și mergeți la un film.

Ceea ce tocmai ați făcut a fost a comunicare sincronă (înainte și înapoi) cu dl X. El a ascultat cum i-ați pus întrebarea dvs. și ați ascultat când a răspuns.

Scenariul 2 - Dl X nu este mulțumit de sincronicitate

Deoarece domnul X este atât de eficient, el începe să primească mai multe apeluri. Deci ce se întâmplă atunci când îl chemați, dar este deja ocupat vorbind cu altcineva? Nu veți putea să-i puneți întrebarea - până nu este liber să primiți apelul. Tot ce veți auzi este un ton ocupat.

Deci, ce poate face domnul X pentru a combate acest lucru?

În loc să preluați direct apelurile:

1. Dl X angajează un tip nou, domnul M și îi dă un robot telefonic pentru apelanți să lăsați mesajele.
2. Domnul M trebuie să meargă transmiteți un mesaj de la robotul telefonic către domnul X, odată ce știe că dl X a terminat complet procesarea tuturor mesajelor anterioare și este deja liber să ia unul nou.
3. Deci, acum când îl sunați, în loc să obțineți un ton ocupat, veți lăsa un mesaj pentru domnul X, atunci așteptați să vă sune înapoi (nu există momentan film).
4. Odată ce dl X este terminat cu toate mesajele de așteptare pe care le primește în fața voastră, el va examina problema dvs. și te sun eu pentru a vă da un răspuns.

Acum, aici se află întrebarea: au fost acțiunile de până acum sincron sau asincron?

E amestecat. Când ați lăsat mesajul, Domnul X nu ascultase, astfel încât cea de-a patra comunicare era asincronă.

Dar, când a răspuns, ați fost acolo ascultând, care face comunicarea de retur sincronă.

Sper că până acum ați dobândit o mai bună înțelegere a modului în care sincronizarea este percepută în termeni de comunicare. Este timpul să aduceți JavaScript.

JavaScript - un limbaj de programare asincron

Când cineva etichetează JavaScript asincron, la ce se referă în general este modul în care poți lăsați un mesaj pentru asta, și nu ai blocat apelul cu un ton ocupat.

Apelurile pentru funcții sunt niciodată direct în JavaScript, sunt literalmente terminate prin mesaje.

JavaScript utilizează a coadă de mesaje unde sunt ținute mesajele (sau evenimentele) primite. Un eveniment-loop (un dispecer de mesaje) expediază secvențial aceste mesaje către un a stack de apeluri unde sunt funcțiile corespunzătoare ale mesajelor stivuite ca cadre (argumente și variabile de funcții) pentru execuție.

Șirul de apeluri menține cadrul solicitat pentru funcția inițială și orice alte cadre pentru funcții numite prin apeluri imbricate deasupra lui .

Când un mesaj se alătură coadajului, așteaptă până când stivă de apel este goliți toate cadrele din mesajul anterior, și atunci când este, evenimentul-buclă afectează mesajul anterior, și adaugă cadrele corespunzătoare mesajului curent în stiva de apeluri.

Mesajul așteaptă din nou până devine stiva apelurilor goale din cadrele sale corespunzătoare (adică execuțiile tuturor funcțiilor stivuite se termină), apoi sunt deconectate.

Luați în considerare următorul cod:

 funcția foo ()  bara de funcții () foo ();  funcție baz () bar ();  baz (); 

Funcția care rulează este Baz () (la ultimul rând al fragmentului de cod), pentru care se adaugă un mesaj la coadă, iar atunci când buzunarul evenimentului îl preia, stiva de apeluri începe stivuirea cadrelor pentru Baz (), bar(), și foo () la punctele de executare relevante.

Odată ce execuția funcțiilor este completă una câte una, cadrele lor sunt eliminat din stiva de apeluri, în timp ce mesajul este încă așteaptă în coada de așteptare, pana cand Baz () este scos din stack.

Rețineți că apelurile pentru funcții sunt niciodată direct în JavaScript, sunt terminate prin mesaje. Deci, ori de câte ori auziți pe cineva spunând că JavaScript în sine este un limbaj de programare asincron, presupuneți că vorbesc despre modul său integrat “robot telefonic”, și cum sunteți liberi să lăsați mesaje.

Dar cum rămâne cu metodele asincrone specifice?

Până în prezent nu am atins API, cum ar fi setTimeout () și AJAX, acestea sunt cele care sunt denumite în mod specific ca fiind asincron. De ce este asta?

Este important să înțelegeți exact ce este sincron sau asincron. JavaScript, cu ajutorul evenimentelor și a evenimentului, se poate practica procesarea asincronă a mesajelor, dar asta nu înseamnă Tot în JavaScript este asincron.

Amintiți-vă, v-am spus că mesajul nu a părăsit până când s-a făcut call stack goale de cadrele sale corespunzătoare, așa cum nu ați plecat pentru un film până când nu ați primit răspunsul dvs. - asta e fiind sincron, esti acolo in asteptare până când sarcina este completă, și veți primi răspunsul.

Aşteptare nu este ideal în toate scenariile. Ce se întâmplă dacă după ce ați lăsat un mesaj, în loc să așteptați, puteți pleca în film? Ce se întâmplă dacă o funcție se poate retrage (golirea teancului de apeluri) și mesajul său poate fi decalat chiar înainte ca sarcina funcției să fie completată? Ce se întâmplă dacă puteți executa codul asincron?

Aici se află API-uri, cum ar fi setTimeout () și AJAX intră în imagine, iar ceea ce fac este ... să rămână, nu pot explica acest lucru fără să mă întorc la domnul X, pe care o vom vedea în a doua parte a acestui articol. Rămâneți aproape.