Allas favorit: konceptvideotid! Återuppringningar är ett viktigt begrepp i JavaScript. De är funktioner som anropas när en åtgärd har slutförts. Låna sedan ut struktur och timing till vår kod.
Ta till exempel animationen vi använde i den senaste videon. Animationer tar tid att köra. Vad händer om du vill att något annat ska hända precis när animeringen är klar? Måste du göra a setTimeoutför samma längd som animationen? Nej. jQuery ger oss återuppringningsfunktioner som används just för det ändamålet.
De är vanligtvis en ytterligare parameter som vi skickar till metoden. Vid animering skickar vi en funktion som den sista parametern. Det är återuppringningsfunktionen och kommer att anropas när animeringen är klar.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Det ser kanske lite funky ut, men i princip gör vi bara:
.animate(a, b)Var aär ett objekt med egenskaper och värden, och bär en återuppringningsfunktion.
Men vi vet från den senaste videon att animering också kan ta en timingparameter som anger hur lång tid en animering tar. Vart går det? Det är en valfri parameter, precis som återuppringningsfunktionen är. Om vi ville använda den skulle vi sätta den rätt i mitten, så i huvudsak:
.animate(propertiesObject, duration, callback);Och det finns en annan valfri parameter också, en sträng som vi kan skicka för att ange ett lättnadsvärde.
.animate(propertiesObject, duration, easing, callback);jQuery råkar bara vara coolt och smart om de valfria parametrarna. Om du utelämnar de två mellersta och bara skickar återuppringningen, kan den berätta vad du skickar är en funktion, inte ett nummer eller en sträng, så det vet att du menar en återuppringningsfunktion. Du behöver inte skicka falska värden eller något annat. Det är bara bra API-design!
När du tittar på jQuery-dokumentationen visar de det så här:
.animate (egenskaper (, varaktighet) (, lättnad) (, komplett))
Sedan direkt efter förklara de förväntade typerna.
Men hur som helst, tillbaka till återuppringningar. Du kan bli ganska kapslad. Tänk dig att du lägger till en annan animation i återuppringningsfunktionen, och den animeringen har sin egen återuppringning. Det är helt rimligt, eftersom du kanske vill göra en animering i flera steg. Du behöver bara hålla ordning.
Se pennan 450c5810be27a9a8946cb8012cbd1213 av Chris Coyier (@chriscoyier) på CodePen
Vi använder bara animering som ett exempel här. Kanske är Ajax en ännu vanligare användning av återuppringningsfunktioner. Ajax är när webbläsaren ropar på en annan resurs utan att uppdatera sidan. Det kan ta en helt okänd tid. Det beror på bandbredd och latens och storleken på filen och felförhållanden och alla slags saker. Du kan sannolikt inte göra någonting med den Ajax-begäran förrän du får tillbaka något eller på annat sätt mer information. Återuppringningsfunktioner är perfekta för det, och vi kommer in på det senare.