Iedereen favoriet: conceptvideo-tijd! Callbacks zijn een belangrijk concept in JavaScript. Het zijn functies die worden aangeroepen wanneer een actie is voltooid. Geef dan structuur en timing aan onze code.
Neem bijvoorbeeld de animatie die we in de vorige video hebben gebruikt. Animaties hebben tijd nodig om te worden uitgevoerd. Wat als u wilt dat er iets anders gebeurt als die animatie is afgelopen? Moet je a doen setTimeoutvoor dezelfde lengte als de animatie? Nee. jQuery geeft ons callback-functies die alleen voor dat doel worden gebruikt.
Ze zijn meestal een extra parameter die we doorgeven aan de methode. In het geval van animatie geven we een functie door als laatste parameter. Dat is de callback-functie, en wordt aangeroepen wanneer de animatie is voltooid.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Dat ziet er misschien een beetje funky uit, maar in wezen doen we gewoon:
.animate(a, b)Waar ais een object van eigenschappen en waarden, en bis een callback-functie.
Maar we weten uit de laatste video dat animatie ook een timingparameter kan aannemen die aangeeft hoe lang een animatie duurt. Waar gaat dat heen? Dat is een optionele parameter, net als de callback-functie. Als we het wilden gebruiken, zouden we het precies in het midden plaatsen, dus in wezen:
.animate(propertiesObject, duration, callback);En er is ook nog een optionele parameter, een string die we kunnen doorgeven om een versnellingswaarde op te geven.
.animate(propertiesObject, duration, easing, callback);jQuery is gewoon cool en slim over die optionele parameters. Als u de middelste twee weglaat en de callback gewoon doorgeeft, kan het zien dat wat u doorgeeft een functie is, geen nummer of tekenreeks, dus het weet dat u een callback-functie bedoelt. U hoeft geen valse waarden of zoiets door te geven. Dat is gewoon een goed API-ontwerp!
Als je de jQuery-documentatie bekijkt, laten ze het als volgt zien:
.animate (properties (, duration) (, easing) (, complete))
Leg daarna direct de verwachte typen uit.
Maar goed, terug naar callbacks. Je kunt behoorlijk genest worden. Stel je voor dat je een andere animatie in de callback-functie plaatst, en die animatie heeft zijn eigen callback. Dat is volkomen redelijk, omdat u misschien een animatie met meerdere stappen wilt maken. Je moet gewoon georganiseerd blijven.
Zie de Pen 450c5810be27a9a8946cb8012cbd1213 door Chris Coyier (@chriscoyier) op CodePen
We gebruiken hier alleen animatie als voorbeeld. Misschien een nog gebruikelijker gebruik van callback-functies is Ajax. Ajax is wanneer de browser om een andere bron vraagt zonder de pagina te vernieuwen. Dat kan een totaal onbekende hoeveelheid tijd kosten. Het hangt af van de bandbreedte en latentie en de grootte van het bestand en foutcondities en allerlei dingen. U kunt waarschijnlijk niets met dat Ajax-verzoek doen totdat u iets terugkrijgt of anderszins meer informatie. Callback-functies zijn daar perfect voor, en daar komen we later op terug.