JavaScripti tagasihelistamisfunktsioonid - mis on tagasihelistamised JS-is ja kuidas neid kasutada

Kui olete programmeerimisega kursis, teate juba, milliseid funktsioone tehakse ja kuidas neid kasutada. Mis on aga tagasihelistamisfunktsioon? Tagasihelistamisfunktsioonid on JavaScripti oluline osa ja kui olete aru saanud, kuidas tagasihelistamised toimivad, saate JavaScriptis palju paremaks.

Nii et selles postituses tahaksin aidata teil mõne näite abil mõista, mis on tagasihelistamisfunktsioonid ja kuidas neid JavaScripti kasutada.

Mis on tagasihelistamisfunktsioon?

JavaScripti funktsioonid on objektid. Kas saame objekte funktsioonidele parameetritena edastada? Jah.

Niisiis võime funktsioone parameetritena edastada ka teistele funktsioonidele ja kutsuda neid väliste funktsioonide sisse. Tundub keeruline? Lubage mul näidata, et allpool toodud näites:

function print(callback) { callback(); }

Funktsioon print () võtab parameetrina teise funktsiooni ja kutsub selle sisse. See kehtib JavaScriptis ja nimetame seda tagasihelistamiseks. Nii et funktsioon, mis edastatakse teisele funktsioonile parameetrina, on tagasihelistamisfunktsioon. Kuid see pole veel kõik.

Allpool saate vaadata ka tagasihelistamisfunktsioonide videoversiooni:

Miks vajame tagasihelistamisfunktsioone?

JavaScript käitab koodi järjest ülalt alla järjestuses. Kuid on mõningaid juhtumeid, kus kood töötab (või peab käima) pärast midagi muud ja ka mitte järjestikku. Seda nimetatakse asünkroonseks programmeerimiseks.

Tagasihelistamised tagavad, et funktsioon ei hakka enne ülesande täitmist töötama, vaid töötab kohe pärast ülesande täitmist. See aitab meil arendada asünkroonset JavaScripti koodi ja hoiab meid probleemide ja vigade eest kaitstud.

JavaScriptis on tagasihelistusfunktsiooni loomise viis selle edastamine parameetrina mõnele teisele funktsioonile ja seejärel selle tagasihelistamine kohe, kui midagi on juhtunud või mõni ülesanne on lõpule viidud. Vaatame, kuidas ...

Tagasihelistamise loomine

Eespool selgitatu mõistmiseks lubage mul alustada lihtsa näitega. Soovime logida konsooli sõnumi, kuid see peaks olema kohal 3 sekundi pärast.

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

JavaScriptis on sisseehitatud meetod nimega “setTimeout”, mis kutsub funktsiooni või hindab avaldist etteantud aja möödudes (millisekundites). Nii et siin kutsutakse funktsiooni “sõnum” pärast 3 sekundi möödumist. (1 sekund = 1000 millisekundit)

Teisisõnu, sõnumifunktsiooni kutsutakse pärast midagi juhtunud (pärast selle näite möödumist 3 sekundit), kuid mitte varem. Nii et sõnumifunktsioon on tagasihelistamisfunktsiooni näide.

Mis on anonüümne funktsioon?

Teise võimalusena saame funktsiooni määratleda otse teise funktsiooni sees, selle asemel, et seda kutsuda. See näeb välja selline:

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

Nagu näeme, pole tagasihelistamisfunktsioonil siin nime ja funktsiooni määratlust ilma JavaScripti nimeta nimetatakse anonüümseks funktsiooniks. See teeb täpselt sama ülesande nagu ülaltoodud näide.

Tagasihelistamine noole funktsioonina

Soovi korral võite kirjutada sama tagasihelistamisfunktsiooni nagu ES6 noolefunktsioon, mis on JavaScripti uuemat tüüpi funktsioon:

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

Aga sündmused?

JavaScript on sündmustepõhine programmeerimiskeel. Samuti kasutame sündmuste deklaratsioonide puhul tagasihelistamisfunktsioone. Oletame näiteks, et soovime, et kasutajad klõpsaksid nuppu:

Click here

Seekord näeme konsoolis teadet ainult siis, kui kasutaja klõpsab nuppu:

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

Nii et siin valime kõigepealt nupu selle ID-ga ja seejärel lisame sündmuste kuulaja meetodiga addEventListener. See võtab 2 parameetrit. Esimene on selle tüüp, klõps, ja teine ​​parameeter on tagasihelistamisfunktsioon, mis logib teate, kui nupule klõpsatakse.

Nagu näete, kasutatakse tagasihelistamise funktsioone ka JavaScripti sündmuste deklaratsioonide jaoks.

Tõmba otsad kokku

Tagasihelistamisi kasutatakse JavaScriptis sageli ja ma loodan, et see postitus aitab teil mõista, mida nad tegelikult teevad ja kuidas nendega lihtsam töötada. Järgmisena saate õppida JavaScripti lubaduste kohta, mis on sarnane teema, mida ma oma uues postituses selgitasin.

Kui soovite veebiarenduse kohta rohkem teada saada, jälgige mind julgelt Youtube'is !

Aitäh, et lugesid!