Alles favorit: konceptvideo tid! Callbacks er et vigtigt koncept i JavaScript. Det er funktioner, der kaldes, når en handling er afsluttet. Udlån derefter struktur og timing til vores kode.
Tag for eksempel den animation, vi brugte i den sidste video. Animationer tager tid at køre. Hvad hvis du vil have noget andet til at ske lige når animationen er færdig? Skal du lave en setTimeouti samme længde som animationen? Nix. jQuery giver os tilbagekaldsfunktioner, der kun bruges til dette formål.
De er typisk en yderligere parameter, som vi videregiver til metoden. I tilfælde af animation videregiver vi en funktion som den sidste parameter. Det er tilbagekaldsfunktionen og kaldes, når animationen er afsluttet.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Det ser måske lidt funky ud, men i det væsentlige laver vi bare:
.animate(a, b)Hvor aer et objekt med egenskaber og værdier, og ber en tilbagekaldsfunktion.
Men vi ved fra den sidste video, at animation også kan tage en timingparameter, der specificerer, hvor lang tid en animation vil tage. Hvor går det hen? Det er en valgfri parameter, ligesom tilbagekaldsfunktionen er. Hvis vi ville bruge det, ville vi placere det lige i midten, så i det væsentlige:
.animate(propertiesObject, duration, callback);Og der er også en anden valgfri parameter, en streng, vi kan videregive for at angive en lempelsesværdi.
.animate(propertiesObject, duration, easing, callback);jQuery er bare cool og smart med disse valgfri parametre. Hvis du udelader de midterste to og bare videresender tilbagekaldet, kan det fortælle, hvad du sender, er en funktion, ikke et tal eller en streng, så det ved, at du mener en tilbagekaldsfunktion. Du behøver ikke at give falske værdier eller noget. Det er bare godt API-design!
Når du ser på jQuery-dokumentationen, viser de det sådan:
.animate (egenskaber (, varighed) (, lettelse) (, komplet))
Derefter lige efter forklare de forventede typer.
Men alligevel tilbage til tilbagekald. Du kan blive temmelig indlejret. Forestil dig at sætte en anden animation i tilbagekaldsfunktionen, og den animationen har sin egen tilbagekaldelse. Det er helt rimeligt, da du måske vil lave en flertrins animation. Du skal bare holde orden.
Se pennen 450c5810be27a9a8946cb8012cbd1213 af Chris Coyier (@chriscoyier) på CodePen
Vi bruger bare animation som et eksempel her. Måske er Ajax en endnu mere almindelig brug af tilbagekaldsfunktioner. Ajax er, når browseren kalder på en anden ressource uden at opdatere siden. Det kan tage en helt ukendt tid. Det afhænger af båndbredde og latenstid og størrelsen på filen og fejlforhold og alle slags ting. Du kan sandsynligvis ikke gøre noget med den Ajax-anmodning, før du får noget tilbage eller på anden måde mere information. Callback-funktioner er perfekte til det, og vi kommer ind på det senere.