El favorito de todos: ¡la hora del video conceptual! Las devoluciones de llamada son un concepto importante en JavaScript. Son funciones que se llaman cuando una acción ha terminado de ejecutarse. Luego, preste estructura y tiempo a nuestro código.
Tomemos, por ejemplo, la animación que usamos en el último video. Las animaciones tardan en ejecutarse. ¿Qué pasa si quieres que suceda algo más justo cuando termine la animación? ¿Tienes que hacer una setTimeoutcon la misma duración que la animación? No. jQuery nos brinda funciones de devolución de llamada que se usan solo para ese propósito.
Por lo general, son un parámetro adicional que pasamos al método. En el caso de la animación, pasamos una función como último parámetro. Esa es la función de devolución de llamada, y se llamará cuando se complete la animación.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Eso parece un poco raro, pero esencialmente solo estamos haciendo:
.animate(a, b)Donde aes un objeto de propiedades y valores, y bes una función de devolución de llamada.
Pero sabemos por el último video que la animación también puede tomar un parámetro de tiempo que especifica cuánto tiempo tomará una animación. ¿A dónde va eso? Ese es un parámetro opcional, al igual que la función de devolución de llamada. Si quisiéramos usarlo, lo pondríamos justo en el medio, así que esencialmente:
.animate(propertiesObject, duration, callback);Y también hay otro parámetro opcional, una cadena que podemos pasar para especificar un valor de aceleración.
.animate(propertiesObject, duration, easing, callback);jQuery resulta ser genial e inteligente con respecto a esos parámetros opcionales. Si omite los dos del medio y simplemente pasa la devolución de llamada, puede decir que lo que está pasando es una función, no un número o cadena, por lo que sabe que se refiere a una función de devolución de llamada. No tiene que pasar valores falsos ni nada. ¡Eso es simplemente un buen diseño de API!
Cuando miras la documentación de jQuery, la muestran así:
.animate (propiedades (, duración) (, suavizado) (, completo))
Luego, justo después, explique los tipos esperados.
Pero de todos modos, volvamos a las devoluciones de llamada. Puedes anidar bastante. Imagínese poner otra animación en la función de devolución de llamada, y esa animación tiene su propia devolución de llamada. Eso es perfectamente razonable, ya que es posible que desee hacer una animación de varios pasos. Solo necesitas mantenerte organizado.
Vea el Pen 450c5810be27a9a8946cb8012cbd1213 de Chris Coyier (@chriscoyier) en CodePen
Aquí solo estamos usando la animación como ejemplo. Quizás un uso aún más común de las funciones de devolución de llamada es Ajax. Ajax es cuando el navegador solicita otro recurso sin actualizar la página. Eso puede llevar una cantidad de tiempo completamente desconocida. Depende del ancho de banda y la latencia y el tamaño del archivo y las condiciones de error y todo tipo de cosas. Es probable que no pueda hacer nada con esa solicitud de Ajax hasta que obtenga algo o más información. Las funciones de devolución de llamada son perfectas para eso, y hablaremos de eso más adelante.