Funkcie spätného volania JavaScriptu - Čo sú spätné volania v JS a ako ich používať

Ak ste oboznámení s programovaním, už viete, aké funkcie fungujú a ako ich používať. Čo je to však funkcia spätného volania? Funkcie spätného volania sú dôležitou súčasťou JavaScriptu a keď pochopíte, ako spätné volania fungujú, budete v JavaScripte omnoho lepší.

V tomto príspevku by som vám teda chcel pomocou niekoľkých príkladov pomôcť pochopiť, čo sú funkcie spätného volania a ako ich používať v JavaScripte.

Čo je funkcia spätného volania?

V JavaScripte sú funkciami objekty. Môžeme prenášať objekty do funkcií ako parametre? Áno.

Môžeme teda tiež odovzdať funkcie ako parametre ďalším funkciám a nazvať ich vo vnútri vonkajších funkcií. Znie to komplikovane? Ukážem to v príklade nižšie:

function print(callback) { callback(); }

Funkcia print () vezme ako funkciu inú funkciu a zavolá ju dovnútra. To platí v JavaScripte a my tomu hovoríme „spätné volanie“. Takže funkcia, ktorá sa odovzdá inej funkcii ako parameter, je funkcia spätného volania. Ale to nie je všetko.

Ďalej si môžete pozrieť video verziu funkcií spätného volania:

Prečo potrebujeme funkcie spätného volania?

JavaScript spúšťa kód postupne v poradí zhora nadol. Existujú však prípady, že sa kód spustí (alebo musí spustiť) potom, čo sa stane niečo iné, a tiež nie postupne. Toto sa nazýva asynchrónne programovanie.

Spätné volania zaisťujú, že sa funkcia nespustí pred dokončením úlohy, ale spustí sa hneď po dokončení úlohy. Pomáha nám vyvinúť asynchrónny kód JavaScript a chráni nás pred problémami a chybami.

V JavaScripte je spôsobom, ako vytvoriť funkciu spätného volania, odovzdať ju ako parameter inej funkcii a potom ju zavolať späť hneď po tom, ako sa niečo stane alebo sa dokončí nejaká úloha. Pozrime sa, ako ...

Ako vytvoriť spätné volanie

Aby som pochopil, čo som vysvetlil vyššie, začnem jednoduchým príkladom. Chceme prihlásiť správu na konzolu, ale mala by tam byť po 3 sekundách.

const message = function() { console.log("This message is shown after 3 seconds"); } setTimeout(message, 3000);

V JavaScripte je zabudovaná metóda s názvom „setTimeout“, ktorá volá funkciu alebo vyhodnotí výraz po danom časovom období (v milisekundách). Takže tu sa funkcia „správa“ volá po uplynutí 3 sekúnd. (1 sekunda = 1 000 milisekúnd)

Inými slovami, funkcia správy sa volá po tom, čo sa niečo stalo (pre tento príklad uplynú 3 sekundy), ale nie skôr. Funkcia správy je teda príkladom funkcie spätného volania.

Čo je to anonymná funkcia?

Alternatívne môžeme namiesto volania definovať funkciu priamo vo vnútri inej funkcie. Bude to vyzerať takto:

setTimeout(function() { console.log("This message is shown after 3 seconds"); }, 3000);

Ako vidíme, funkcia spätného volania tu nemá žiadny názov a definícia funkcie bez názvu v JavaScripte sa nazýva „anonymná funkcia“. Toto robí úplne rovnakú úlohu ako v príklade vyššie.

Spätné volanie ako funkcia šípky

Ak chcete, môžete napísať rovnakú funkciu spätného volania ako šípkovú funkciu ES6, čo je novší typ funkcie v JavaScripte:

setTimeout(() => { console.log("This message is shown after 3 seconds"); }, 3000);

Čo udalosti?

JavaScript je programovací jazyk založený na udalostiach. Funkcie spätného volania používame aj na deklarácie udalostí. Povedzme napríklad, že chceme, aby používatelia klikli na tlačidlo:

Click here

Tentokrát sa nám na konzole zobrazí správa, až keď používateľ klikne na tlačidlo:

document.queryselector("#callback-btn") .addEventListener("click", function() { console.log("User has clicked on the button!"); });

Takže tu najskôr vyberieme tlačidlo s jeho ID a potom pomocou metódy addEventListener pridáme poslucháča udalostí. Trvá to 2 parametre. Prvý je jeho typ, „kliknutie“, a druhý parameter je funkcia spätného volania, ktorá zaznamená správu po kliknutí na tlačidlo.

Ako vidíte, funkcie spätného volania sa používajú aj na deklarácie udalostí v JavaScripte.

Zabaliť

Spätné volania sa často používajú v JavaScripte a dúfam, že vám tento príspevok pomôže pochopiť, čo vlastne robia a ako s nimi ľahšie pracovať. Ďalej sa môžete dozvedieť viac o Java Promises, čo je podobná téma, ktorú som vysvetlil v mojom novom príspevku.

Ak sa chcete dozvedieť viac o vývoji webu, neváhajte ma sledovať na Youtube !

Ďakujem za čítanie!