Alles favoritt: konseptvideo tid! Tilbakekallinger er et viktig konsept i JavaScript. De er funksjoner som kalles når en handling er fullført. Så lån ut struktur og timing til koden vår.
Ta for eksempel animasjonen vi brukte i forrige video. Animasjoner tar tid å kjøre. Hva om du vil at noe annet skal skje akkurat når animasjonen er ferdig? Må du gjøre a setTimeouti samme lengde som animasjonen? Nei. jQuery gir oss tilbakeringingsfunksjoner som bare brukes til det formålet.
De er vanligvis en tilleggsparameter som vi overfører til metoden. Når det gjelder animasjon, sender vi en funksjon som den siste parameteren. Det er tilbakeringingsfunksjonen, og vil ringes når animasjonen er fullført.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Det ser kanskje litt funky ut, men egentlig gjør vi bare:
.animate(a, b)Hvor aer et objekt med egenskaper og verdier, og ber en tilbakeringingsfunksjon.
Men vi vet fra forrige video at animasjon også kan ta en timingparameter som spesifiserer hvor lang tid en animasjon vil ta. Hvor går det? Det er en valgfri parameter, akkurat som tilbakeringingsfunksjonen er. Hvis vi ønsket å bruke den, ville vi satt den rett i midten, så egentlig:
.animate(propertiesObject, duration, callback);Og det er også en annen valgfri parameter, en streng vi kan sende for å spesifisere en lettelsesverdi.
.animate(propertiesObject, duration, easing, callback);jQuery er tilfeldigvis kult og smart om de valgfrie parametrene. Hvis du utelater de to midterste og bare passerer tilbakeringingen, kan den fortelle hva du sender er en funksjon, ikke et tall eller en streng, så den vet at du mener en tilbakeringingsfunksjon. Du trenger ikke å gi falske verdier eller noe. Det er bare god API-design!
Når du ser på jQuery-dokumentasjonen, viser de det slik:
.animate (egenskaper (, varighet) (, lettelse) (, komplett))
Så rett etter forklare de forventede typene.
Men uansett, tilbake til tilbakeringing. Du kan bli ganske nestet. Tenk deg å sette en annen animasjon i tilbakeringingsfunksjonen, og den animasjonen har sin egen tilbakeringing. Det er helt rimelig, ettersom du kanskje vil gjøre en flertrinns animasjon. Du trenger bare å holde orden.
Se pennen 450c5810be27a9a8946cb8012cbd1213 av Chris Coyier (@chriscoyier) på CodePen
Vi bruker bare animasjon som et eksempel her. Kanskje en enda mer vanlig bruk av tilbakeringingsfunksjoner er Ajax. Ajax er når nettleseren ringer etter en annen ressurs uten å oppdatere siden. Det kan ta helt ukjent tid. Det avhenger av båndbredde og ventetid, størrelsen på filen og feilforhold og alle slags ting. Du kan sannsynligvis ikke gjøre noe med den Ajax-forespørselen før du får noe tilbake eller på annen måte mer informasjon. Tilbakeringingsfunksjoner er perfekte for det, og vi kommer nærmere inn på det senere.