JavaScript funkcije povratnog poziva - što su povratni pozivi u JS-u i kako ih koristiti

Ako ste upoznati s programiranjem, već znate što rade funkcije i kako ih koristiti. Ali što je funkcija povratnog poziva? Funkcije povratnog poziva važan su dio JavaScript-a i kad shvatite kako funkcioniraju povratni pozivi, postat ćete puno bolji u JavaScript-u.

Stoga bih vam u ovom postu htio pomoći da shvatite što su funkcije povratnog poziva i kako ih koristiti u JavaScript-u prolazeći kroz neke primjere.

Što je funkcija povratnog poziva?

U JavaScript-u funkcije su objekti. Možemo li objekte prosljeđivati funkcijama kao parametre? Da.

Dakle, također možemo funkcije kao parametre proslijediti drugim funkcijama i pozvati ih unutar vanjskih funkcija. Zvuči komplicirano? Dopustite mi da to pokažem u primjeru ispod:

function print(callback) { callback(); }

Funkcija print () uzima drugu funkciju kao parametar i poziva je unutra. To vrijedi u JavaScript-u i nazivamo ga "povratni poziv". Dakle, funkcija koja se prosljeđuje drugoj funkciji kao parametar je funkcija povratnog poziva. Ali to nije sve.

U nastavku možete pogledati i video verziju funkcija povratnog poziva:

Zašto su nam potrebne funkcije povratnog poziva?

JavaScript pokreće kôd u slijedu odozgo prema dolje. Međutim, postoje slučajevi da se kôd pokreće (ili se mora pokretati) nakon što se dogodi nešto drugo, a također ne uzastopno. To se naziva asinkrono programiranje.

Povratni pozivi osiguravaju da se funkcija neće pokrenuti prije dovršenja zadatka, već da će se pokrenuti odmah nakon dovršetka zadatka. Pomaže nam u razvoju asinkronog JavaScript koda i čuva nas od problema i pogrešaka.

U JavaScript-u način za stvaranje funkcije povratnog poziva je prosljeđivanje kao parametar drugoj funkciji, a zatim vraćanje poziva odmah nakon što se nešto dogodilo ili je neki zadatak dovršen. Da vidimo kako ...

Kako stvoriti povratni poziv

Da bih razumio ono što sam gore objasnio, počnite s jednostavnim primjerom. Želimo prijaviti poruku na konzolu, ali trebala bi biti tamo nakon 3 sekunde.

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

U JavaScript postoji ugrađena metoda koja se naziva "setTimeout", koja poziva funkciju ili procjenjuje izraz nakon određenog vremenskog razdoblja (u milisekundama). Dakle, ovdje se funkcija "poruka" poziva nakon što su prošle 3 sekunde. (1 sekunda = 1000 milisekundi)

Drugim riječima, funkcija poruke poziva se nakon što se nešto dogodilo (nakon 3 sekunde koje su prošle za ovaj primjer), ali ne i prije. Dakle, funkcija poruke primjer je funkcije povratnog poziva.

Što je anonimna funkcija?

Alternativno, možemo definirati funkciju izravno unutar druge funkcije, umjesto da je zovemo. Izgledat će ovako:

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

Kao što vidimo, funkcija povratnog poziva ovdje nema ime, a definicija funkcije bez imena u JavaScript-u naziva se "anonimna funkcija". Ovo radi točno isti zadatak kao i gornji primjer.

Povratni poziv kao funkcija strelice

Ako želite, također možete napisati istu funkciju povratnog poziva kao i ES6 funkcija strelice, što je noviji tip funkcije u JavaScript-u:

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

Što je s događanjima?

JavaScript je programski jezik vođen događajima. Također koristimo funkcije povratnog poziva za deklaracije događaja. Na primjer, recimo da želimo da korisnici kliknu na gumb:

Click here

Ovoga puta vidjet ćemo poruku na konzoli samo kada korisnik klikne na gumb:

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

Dakle, ovdje prvo odabiremo gumb s njegovim id-om, a zatim dodajemo slušatelj događaja metodom addEventListener. Potrebna su 2 parametra. Prvi je njegova vrsta, "klik", a drugi parametar je funkcija povratnog poziva, koja zapisuje poruku kad se klikne gumb.

Kao što vidite, funkcije povratnog poziva također se koriste za deklaracije događaja u JavaScript-u.

Zamotati

Povratni pozivi često se koriste u JavaScriptu i nadam se da će vam ovaj post pomoći da razumijete što oni zapravo rade i kako lakše raditi s njima. Dalje, možete naučiti o JavaScript Promises, što je slična tema koju sam objasnio u svom novom postu.

Ako želite saznati više o web razvoju, slobodno me pratite na Youtubeu !

Hvala na čitanju!