JavaScript visszahívási funkciók - Mik a visszahívások a JS-ben és hogyan használhatók?

Ha ismeri a programozást, akkor már tudja, hogy milyen funkciók vannak és hogyan kell használni őket. De mi az a visszahívási funkció? A visszahívási funkciók a JavaScript fontos részét képezik, és miután megértette a visszahívások működését, sokkal jobbá válik a JavaScript.

Tehát ebben a bejegyzésben néhány példán keresztül szeretnék segíteni abban, hogy megértsék, mik a visszahívási funkciók, és hogyan kell használni őket a JavaScript-ben.

Mi az a visszahívási funkció?

A JavaScript-ben a függvények objektumok. Átadhatjuk az objektumokat a függvényeknek paraméterként? Igen.

Tehát a függvényeket paraméterként át is adhatjuk más függvényeknek, és meghívhatjuk a külső függvényeken belülre. Bonyolultnak hangzik? Hadd mutassam meg, hogy az alábbi példában:

function print(callback) { callback(); }

A print () függvény paraméterként egy másik függvényt vesz fel, és belül meghívja. Ez érvényes a JavaScript-ben, és hívjuk „visszahívásnak”. Tehát egy függvény, amelyet paraméterként átadnak egy másik függvénynek, visszahívási függvény. De ez még nem minden.

Az alábbiakban megtekintheti a visszahívási funkciók videó verzióját is:

Miért van szükségünk visszahívási funkciókra?

A JavaScript szekvenciálisan, felülről lefelé fut. Vannak azonban olyan esetek, amikor a kód futtat (vagy futtatnia kell), miután valami más történik, és szintén nem egymás után. Ezt nevezzük aszinkron programozásnak.

A visszahívások meggyőződnek arról, hogy a funkció nem a feladat befejezése előtt fog-e futni, hanem közvetlenül a feladat befejezése után. Segít nekünk az aszinkron JavaScript kód fejlesztésében, és biztonságban tart minket a problémáktól és hibáktól.

A JavaScript-ben a visszahívási függvény létrehozásának módja az, hogy paraméterként átadja egy másik függvénynek, majd azonnal visszahívja, miután valami történt vagy valamilyen feladat befejeződött. Lássuk, hogyan ...

Hogyan hozzunk létre visszahívást

Ahhoz, hogy megértsem a fentieket, hadd kezdjek egy egyszerű példával. Szeretnénk naplózni egy üzenetet a konzolra, de 3 másodperc múlva ott kell lennie.

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

Van egy beépített módszer a JavaScript-ben, az úgynevezett „setTimeout”, amely meghív egy függvényt, vagy egy adott idő után (milliszekundumban) értékeli a kifejezést. Tehát itt az „üzenet” funkciót hívják meg 3 másodperc elteltével. (1 másodperc = 1000 milliszekundum)

Más szavakkal, az üzenet függvényt akkor hívják meg, ha valami történt (3 másodperc elteltével ennek a példának), de korábban nem. Tehát az üzenet függvény egy példa a visszahívási funkcióra.

Mi az a névtelen funkció?

Alternatív megoldásként meghatározhatunk egy függvényt közvetlenül egy másik függvényben, ahelyett, hogy meghívnánk. Így fog kinézni:

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

Mint láthatjuk, itt a visszahívási függvénynek nincs neve, és egy olyan funkciódefiníciót, amely név nélkül szerepel a JavaScript-ben, „névtelen függvényként” hívják. Ez pontosan ugyanazt a feladatot látja el, mint a fenti példa.

Visszahívás nyíl funkcióként

Ha szeretné, ugyanazt a visszahívási függvényt is megírhatja, mint egy ES6 nyílfüggvényt, amely egy újabb típusú függvény a JavaScript-ben:

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

Mi a helyzet az Eseményekkel?

A JavaScript egy eseményvezérelt programozási nyelv. Visszahívási funkciókat is használunk az események deklarálásához. Tegyük fel például, hogy azt akarjuk, hogy a felhasználók kattintson egy gombra:

Click here

Ezúttal csak akkor látunk üzenetet a konzolon, amikor a felhasználó rákattint a gombra:

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

Tehát itt választjuk ki először a gombot az azonosítójával, majd hozzáadunk egy eseményfigyelőt az addEventListener metódussal. 2 paraméter szükséges. Az első típusa a „click”, a második paraméter pedig egy visszahívási funkció, amely naplózza az üzenetet, amikor a gombra kattint.

Amint láthatja, a visszahívási funkciókat is használják az eseménydeklarációkhoz a JavaScript-ben.

Tekerje be

A visszahívásokat gyakran használják a JavaScript-ben, és remélem, hogy ez a bejegyzés segít megérteni, hogy valójában mit csinálnak, és hogyan lehet velük könnyebben dolgozni. Ezután megismerheti a JavaScript ígéreteit, amely egy hasonló téma, amelyet az új bejegyzésemben elmagyaráztam.

Ha szeretne többet megtudni a webfejlesztésről, kövessen bátran a Youtube-on !

Köszönöm, hogy elolvasta!