Si eres un desarrollador web, seguramente has utilizado jQuery en más de una ocasión. Y una de las características más interesantes de esta popular biblioteca de JavaScript es la devolución de llamada, o callback en inglés. ¿Quieres saber cómo funciona y cómo puedes sacarle el máximo provecho? ¡Te lo contamos en este artículo de TIEngranaje!
El jQuery callback La función resuelve un problema muy común cuando se trata de animación. Las declaraciones de JavaScript se ejecutan línea por línea. Hay instancias cuando se trabaja con animaciones, en las que no desea que se ejecute la siguiente línea de código hasta que se haya completado la animación. Para evitar que esto suceda, puede utilizar el callback función.
Sintaxis
$(selector).effect(speed,callback)| Parámetro | Descripción |
|---|---|
callback |
Una función opcional para ejecutar después de que se complete el método |
Ejemplo HTML
Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-callback-function-tutorial/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img3" src="toggle.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Ejemplo
En los siguientes ejemplos, veremos la diferencia entre usar el callback función y omitiendo la callback función. En el primer ejemplo, no callback se utiliza la función. Observe que la imagen de alternancia cambia antes de que se complete la animación.
En el segundo ejemplo, el callback se utiliza la función y la imagen alterna no se modifica hasta que se completa la animación.
<script type="text/javascript">
$(document).ready(function () {
$("#img1").click(function () {
$("#div1").slideToggle("slow");
var $img = $("#img1");
if ($img.attr("src") == "expand.png") {
$img.attr("src", "collapse.png");
} else {
$img.attr("src", "expand.png");
}
});
$("#img2").click(function () {
$("#div2").slideToggle("slow", function () {
var $img = $("#img2");
if ($img.attr("src") == "expand.png") {
$img.attr("src", "collapse.png");
} else {
$img.attr("src", "expand.png");
}
});
});
});
</script> 