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: