Skip to content
Kezdőlap » Szinkron és aszinkron JavaScript

Szinkron és aszinkron JavaScript

Ebben az írásban azt tisztázzuk, hogy mit jelent a szinkron és az aszinkron működés JavaScript esetében. Ahhoz, hogy könnyebben érthető legyen a kettő közötti különbség, egy-egy példát hoztam.

Szinkron JavaScript

Létrehoztam és meghívtam egy függvényt, ami egyszerűen a konzolba ír nekünk egy üzenetet. A példát a CodePen oldalon készítettem el, a linket mellékelni fogom, hogy mindenki kedvére kipróbálhassa. Most viszont jöjjön a kód:

const elso = () => {
    console.log('első');
};
elso();

Ami elsőre szembetűnik, hogy ES6-os nyíl függvényt használtam.

Ha megnézzük az eredményt mondjuk a Google Chrome fejlesztői konzolban (F12-vel is elő lehet csalogatni), akkor talán nem okoz nagy meglepetést, hogy azt a szöveget kaptuk/látjuk, hogy “első”.

Na de ez még nem elég a szinkron működés megértéséhez. Így létrehoztam egy másik függvényt is az előző mintájára, ami egy másik szöveget köp ki a konzolba:

const masodik = () => {
    console.log('második');
};

Ahhoz, hogy ezt ki lehessen próbálni, még kiegészítettem az első függvényt úgy, hogy ő hívja meg a másodikat. A teljes kód így fest tehát:

const elso = () => {
    console.log('elso');
    masodik();
    console.log('harmadik');
};
    
const masodik = () => {
    console.log('masodik');
};

elso();

Ha most meghívjuk az elso() függvényt, akkor a konzolban azt látjuk, hogy:

első
második
harmadik

Vagyis szépen sorban, egymás után lefutottak az utasítások. Először a JavaScript kiírta az “első” szót. Majd meghívta a masodik() függvényt, ami kiírta a konzolba azt a szót, hogy “második”. És végül a masodik() függvény amikor befejezte a futását, akkor a JS végrehajtotta az első függvényben a “harmadik” szót megjelenítő utasítást.

Ez a szinkron működés, vagyis egymás után, sorrendben lefutnak az utasítások.

És akkor itt az említett link a kipróbáláshoz.

Az aszinkron működés

Az aszinkon működés bemutatásához, a második függvényt egy kicsit megfaragtam. Került bele egy setTimeout nevű függvény.

A setTimeout úgy működik, hogy kettő paramétert vár. Az első egy callback függvény, ami valamilyen feladatot hajt végre. A második paraméter pedig egy szám milliszekundumokban. A működés egyszerűen: a setTimeout az első paraméterben definiált vagy átadott callback függvényt futtatja le a második paraméterben megadott milliszekundum idő eltelte után.

Nézzük akkor ezt is:

const masodik = () => {

    setTimeout(() => {
        console.log('Aszinkron második');
    }, 3000);

 };
    
const elso = () => {
    console.log('elso');
    masodik();
    console.log('harmadik');
};

elso();

A callback egy névtelen nyílfüggvény, ami nem erőlteti meg magát túlzottan. Mindössze annyi a feladata, hogy kiírja a konzolba azt, hogy “Aszinkron második”.

A setTimeout második paramétere a 3000, ami 3000 milliszekundumot, azaz 3 másodpercet jelent.

Az elso() függvényt változatlanul hagytam és meg is hívtam. 

Ha a fejlesztői konzol nyitva van, akkor töltsük újra az oldalt és nézzük meg hogyan jelenik meg az eredmény. Azonnal megjelenik a következő két szöveg:

“első”

“harmadik”

Majd kissé komótosan, 3 másodperc eltelte után megjelenik az, “Aszinkron második” szöveg is. Tehát a végeredmény úgy néz ki, hogy:

„első”
„harmadik”
„Aszinkron második”

Valami tök izgi dolog történt. Hiába előzi meg az első függvény belsejében a masodik() függvény hívása a harmadik üzenet megjelenítését, mégis a második függvény írja ki utolsónak a szöveget a konzolba.

De miééért? Azaz hogyan magyarázható az aszinkron működés?

A JavaScript belépett az első függvénybe. Ott rátalált az első utasításra. Azt le is futtatta. Megjelent a konzolban az „első” szöveg.
Majd odaért a setTimeout híváshoz és elindította azt is. De nem várta meg míg a setTimeout „bedöcög” és kiír a konzolba, hanem azonnal ment a következő utasításra, ami azonnal a konzolba tolta a „harmadik” szöveget.
Mindeközben persze a setTimeout is végezte a dolgát, ketyegett a belső órája és a 3 másodperc letelte után hajtotta végre a callback-ben megadott utasítást.

Na ez az aszinkron működés így elsőre. Hogy ez hogyan működik a színfalak mögött, a JavaScript gyomrában, azt a következő izgalmas és tanulságos cikkből megtudhatod.

Majd elfelejtettem az aszinkron működés CodePen-es verziójának linkjét.

YouTube videó

A poszthoz készült egy YouTube videó is:

Címkék: