Funkcije povratnega klica JavaScript - kaj so povratni klici v JS in kako jih uporabiti

Če poznate programiranje, že veste, kaj naredijo funkcije in kako jih uporabljati. Kaj pa je funkcija povratnega klica? Funkcije povratnega klica so pomemben del JavaScript-a in ko boste razumeli, kako delujejo povratni klici, boste v JavaScript postali veliko boljši.

V tem prispevku bi vam rad pomagal razumeti, kaj so funkcije povratnega klica in kako jih uporabiti v JavaScript, tako da si ogledate nekaj primerov.

Kaj je funkcija povratnega klica?

V JavaScript so funkcije predmeti. Ali lahko predmete prenesemo v funkcije kot parametre? Da.

Torej lahko funkcije kot parametre prenesemo tudi na druge funkcije in jih pokličemo znotraj zunanjih funkcij. Se sliši zapleteno? Naj to pokažem v spodnjem primeru:

function print(callback) { callback(); }

Funkcija print () za parameter vzame drugo funkcijo in jo pokliče v notranjost. To velja v JavaScript in temu pravimo »povratni klic«. Funkcija, ki se kot parameter posreduje drugi funkciji, je funkcija povratnega klica. To pa še ni vse.

Spodaj si lahko ogledate tudi video različico funkcij povratnega klica:

Zakaj potrebujemo funkcije povratnega klica?

JavaScript zaporedno izvaja kodo v vrstnem redu od zgoraj navzdol. V nekaterih primerih se koda zažene (ali se mora zagnati), ko se zgodi kaj drugega in tudi ne zaporedno. To se imenuje asinhrono programiranje.

Povratni klici se prepričajo, da se funkcija ne bo zagnala, preden je naloga dokončana, ampak se bo zagnala takoj po zaključku naloge. Pomaga nam razviti asinhrono kodo JavaScript in nas varuje pred težavami in napakami.

V JavaScript je način za ustvarjanje funkcije povratnega klica tako, da jo kot parameter prenesete v drugo funkcijo in jo nato pokličete nazaj takoj, ko se je nekaj zgodilo ali je neka naloga končana. Poglejmo, kako ...

Kako ustvariti povratni klic

Da bi razumeli, kaj sem razložil zgoraj, naj začnem s preprostim primerom. Sporočilo želimo prijaviti na konzolo, vendar bi moralo biti tam po 3 sekundah.

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

V JavaScript je vgrajena metoda, imenovana "setTimeout", ki pokliče funkcijo ali oceni izraz po določenem časovnem obdobju (v milisekundah). Torej, tukaj se funkcija "sporočilo" pokliče po preteku 3 sekund. (1 sekunda = 1000 milisekund)

Z drugimi besedami, funkcija sporočila se pokliče po tem, ko se je kaj zgodilo (po preteku 3 sekund za ta primer), prej pa ne. Funkcija sporočila je torej primer funkcije povratnega klica.

Kaj je anonimna funkcija?

Lahko pa funkcijo definiramo neposredno znotraj druge funkcije, namesto da bi jo poklicali. Videti bo tako:

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

Kot lahko vidimo, funkcija povratnega klica tukaj nima imena, definicija funkcije brez imena v JavaScript pa se imenuje "anonimna funkcija". To naredi popolnoma enako nalogo kot zgornji primer.

Povratni klic kot funkcija puščice

Če želite, lahko napišete isto funkcijo povratnega klica kot puščica ES6, ki je novejša vrsta funkcije v JavaScript:

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

Kaj pa dogodki?

JavaScript je programski jezik, ki temelji na dogodkih. Za izjave o dogodkih uporabljamo tudi funkcije povratnega klica. Recimo na primer, da želimo, da uporabniki kliknejo gumb:

Click here

Tokrat bomo na konzoli videli sporočilo šele, ko uporabnik klikne gumb:

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

Torej tukaj najprej izberemo gumb z njegovim id, nato pa z metodo addEventListener dodamo poslušalec dogodka. Potrebna sta 2 parametra. Prvi je njegov tip »klik«, drugi parameter pa je funkcija povratnega klica, ki ob kliku gumba zabeleži sporočilo.

Kot lahko vidite, se funkcije povratnega klica uporabljajo tudi za izjave o dogodkih v JavaScript.

Zaviti

Povratne klice pogosto uporabljajo v JavaScript in upam, da vam ta objava pomaga razumeti, kaj dejansko počnejo in kako lažje delati z njimi. Nato lahko spoznate JavaScript Promises, ki je podobna tema, ki sem jo razložil v svojem novem prispevku.

Če želite izvedeti več o spletnem razvoju, me spremljajte na Youtubeu !

Hvala za branje!