Každý má rád: čas na koncepční video! Zpětná volání jsou důležitým konceptem v JavaScriptu. Jsou to funkce, které se volají, když je akce dokončena. Poté zapůjčte našemu kódu strukturu a načasování.
Vezměme si například animaci, kterou jsme použili v minulém videu. Spuštění animací nějakou dobu trvá. Co když chcete, aby se hned po dokončení animace stalo něco jiného? Musíte udělat setTimeoutpro stejnou délku jako animace? Ani náhodou. jQuery nám poskytuje funkce zpětného volání používané právě pro tento účel.
Obvykle jsou dalším parametrem, který předáme metodě. V případě animace předáme funkci jako poslední parametr. To je funkce zpětného volání a bude volána, když je animace dokončena.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));To možná vypadá trochu funky, ale v podstatě to děláme jen:
.animate(a, b)Kde aje objekt vlastností a hodnot a bje to funkce zpětného volání.
Z posledního videa ale víme, že animace může trvat také parametr časování, který určuje, jak dlouho bude animace trvat. Kam to jde? To je volitelný parametr, stejně jako funkce zpětného volání. Pokud bychom ji chtěli použít, umístili bychom ji přímo doprostřed, takže v podstatě:
.animate(propertiesObject, duration, callback);A existuje také další volitelný parametr, řetězec, který můžeme předat k určení hodnoty uvolnění.
.animate(propertiesObject, duration, easing, callback);jQuery je v těchto volitelných parametrech prostě super a chytrý. Pokud vynecháte prostřední dva a jen předáte zpětné volání, může zjistit, co předáváte, je funkce, nikoli číslo nebo řetězec, takže ví, že máte na mysli funkci zpětného volání. Nemusíte předávat falešné hodnoty ani nic. To je prostě dobrý design API!
Když se podíváte na dokumentaci jQuery, zobrazí se to takto:
.animate (vlastnosti (, trvání) (, uvolnění) (, úplné))
Pak hned poté vysvětlete očekávané typy.
Ale stejně, zpět k zpětným voláním. Můžete se pěkně vnořit. Představte si vložení další animace do funkce zpětného volání a tato animace má své vlastní zpětné volání. To je naprosto rozumné, protože možná budete chtít udělat vícestupňovou animaci. Musíte jen zůstat organizovaní.
Podívejte se na pero 450c5810be27a9a8946cb8012cbd1213 od Chris Coyier (@chriscoyier) na CodePen
Jako příklad zde používáme pouze animaci. Možná ještě častější použití funkcí zpětného volání je Ajax. Ajax je, když prohlížeč volá po jiném prostředku, aniž by obnovil stránku. To může trvat zcela neznámou dobu. Závisí to na šířce pásma a latenci a velikosti souboru a chybových podmínkách a všech druzích věcí. S tímto požadavkem Ajaxu pravděpodobně nebudete moci nic dělat, dokud nedostanete něco zpět nebo jinak více informací. Funkce zpětného volání jsou k tomu ideální a my se k tomu dostaneme později.