Obľúbené pre všetkých: čas na koncepčné video! Spätné volania sú dôležitým konceptom v JavaScripte. Sú to funkcie, ktoré sa volajú po dokončení akcie. Potom prepožičajte nášmu kódu štruktúru a načasovanie.
Vezmime si napríklad animáciu, ktorú sme použili v minulom videu. Spustenie animácií trvá dlho. Čo ak chcete, aby sa hneď po dokončení tejto animácie stalo niečo iné? Musíte urobiť setTimeoutpre rovnakú dĺžku ako animácia? Nie. jQuery nám poskytuje funkcie spätného volania používané práve na tento účel.
Spravidla sú ďalším parametrom, ktorý metóde odovzdávame. V prípade animácie odovzdáme funkciu ako posledný parameter. Toto je funkcia spätného volania a bude sa volať po dokončení animácie.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Vyzerá to možno trochu funky, ale v podstate to robíme iba:
.animate(a, b)Kde aje objekt vlastností a hodnôt a bje to funkcia spätného volania.
Z posledného videa ale vieme, že animácia môže trvať aj parameter časovania, ktorý určuje, ako dlho bude animácia trvať. Kam to smeruje? Je to voliteľný parameter, rovnako ako funkcia spätného volania. Ak by sme ho chceli použiť, umiestnili by sme ho priamo do stredu, teda v podstate:
.animate(propertiesObject, duration, callback);A je tu aj ďalší voliteľný parameter, reťazec, ktorým môžeme prejsť, aby sme určili hodnotu uvoľnenia.
.animate(propertiesObject, duration, easing, callback);jQuery je v týchto voliteľných parametroch proste super a inteligentný. Ak vynecháte stredné dva a iba odovzdáte spätné volanie, bude vedieť, čo odovzdávate, je funkcia, nie číslo alebo reťazec, takže vie, že máte na mysli funkciu spätného volania. Nemusíte odovzdávať falošné hodnoty ani nič. To je len dobrý dizajn API!
Keď sa pozriete do dokumentácie jQuery, ukážu to takto:
.animate (properties (, duration) (, easing) (, complete))
Potom hneď potom vysvetlite očakávané typy.
Ale aj tak, späť k spätným volaniam. Môžete sa pekne vnoriť. Predstavte si, že by ste do funkcie spätného volania vložili ďalšiu animáciu a táto animácia má svoje vlastné spätné volanie. Je to úplne rozumné, pretože by ste možno chceli urobiť viacstupňovú animáciu. Musíte byť stále organizovaní.
Prezrite si pero 450c5810be27a9a8946cb8012cbd1213 od Chrisa Coyiera (@chriscoyier) na stránkach CodePen
Ako príklad tu uvádzame iba animáciu. Možno ešte bežnejším používaním funkcií spätného volania je Ajax. Ajax nastáva, keď prehliadač zavolá na iný zdroj bez obnovenia stránky. To môže trvať úplne neznáme množstvo času. Závisí to od šírky pásma a latencie a veľkosti súboru, chybových podmienok a všetkého možného. S touto požiadavkou Ajaxu pravdepodobne nebudete môcť nič urobiť, kým nedostanete niečo späť alebo inak získate viac informácií. Funkcie spätného volania sú na to ideálne a k tomu sa dostaneme neskôr.