A menudo cuando hacemos aplicaciones enriquecidas del lado del cliente con jQuery nos vemos en la necesidad de encadenar varias llamadas a funciones, para que una se ejecute detrás de otra, creando un efecto más elaborado. En este artículo veremos lo sencillo que es realizar lo que en inglés se llama "callback", es decir una función que se ejecuta después de otra.

Apilar funciones, para que se ejecuten una detrás de otra, nos servirá para hacer muchas cosas. En nuestro día a día con jQuery iremos encontrando la utilidad, pero de momento para explicar un caso en el que nos resultará imprescindible: realizar una secuencia de efectos y cambios dinámicos en un elemento, donde nos aseguremos que un efecto empieza después de que haya terminado el anterior.

Por ejemplo imaginemos que se desea ocultar una capa con un efecto de fundido (de opaco a transparente), luego moverla a otra posición y volverla a mostrar (ya en la nueva posición) con otro efecto de fundido (en este caso de transparente a opaco). En principio podríamos pensar en hacer un código como este:

$("#micapa").fadeOut(2000);
$("#micapa").css({top: 300, left:200});
$("#micapa").fadeIn(2000);

En este caso estamos alterando las propiedades de una capa con id="micapa". Primero llamamos a fadeOut() para ocultarla con un fundido, que durará 2 segundos (véase el parámetro 2000, que son los milisegundos que durará el efecto). Luego alteramos la posición de la capa, cambiando sus atributos CSS. Para acabar la volvemos a mostrar con un fundido de otros 2000 milisegundos.

Si lanzamos la ejecución de estas sentencias, tal como aparece en el código, será

como si se ejecutasen todas a la vez. Como los fadeOut y fadeIn tardarán 2 segundos en ejecutarse y los cambios de las propiedades CSS top y left son inmediatos, lo que ocurrirá será que primero veremos la capa moverse a la nueva posición y luego veremos los dos efectos de fundido. Es decir, las funciones podrán no ejecutarse en la secuencia que nosotros estábamos buscando.

Cómo realizar una pila de ejecución de funciones

Ahora que ya hemos visto uno de los casos en los que necesitaríamos ejecutar funciones en una pila, una después de otra, esperando a que termine completamente la ejecución de cualquier efecto o acción antes de comenzar con la siguiente. Vamos a ver cómo hacerlo con jQuery.

Simplemente tenemos que saber que todas las funciones o métodos de jQuery pueden recibir un parámetro adicional con la función (o el nombre de la función) que se tiene que ejecutar después que termine el procesamiento de la primera. Esa segunda función que se ejecuta después de la primera es la que se conoce en inglés por callback. Un ejemplo sencillo para entenderlo.

miFuncion ("parametros de la función", funcionCallback);

En ese esquema de llamada a miFuncion(), se le están pasando dos parámetros. El primero sería un supuesto parámetro que necesitase miFuncion() y el segundo, que es le que nos interesa en este caso, el nombre de la función que se tiene que ejecutar después que acabe. Con este código, primero se ejecuta miFuncion() y cuando acaba completamente, se ejecuta funcionCallback(). Pero atención que este ejemplo lo hemos simplificado para que se pueda entender fácilmente y esta sintaxis sólo valdrá si funcionCallback no recibe parámetros, porque no los podemos indicar con el nombre de la función. Veamos entonces una forma de hacer este callback que funcione siempre:

miFuncion ("parametros de la funcion", function() {
   funcionCallback();
});

Con este código, que funcionaría igual que el anterior, lo bueno es que sí podemos indicar los parámetros que se necesiten para la llamada a funcionCallback().

Ejemplo real de callback con jQuery

Ahora que hemos aprendido toda la teoría, veamos un ejemplo práctico que solucionaría el problema comentado anteriormente sobre el procesamiento de diversos efectos y cambios en las propiedades de los objetos, para que se hagan siempre en la secuencia que deseamos. Se trata simplemente de aplicar las llamadas con callback que hemos antes.

$("#micapa").fadeOut(1000, function(){
   $("#micapa").css({'top': 300, 'left':200});
   $("#micapa").fadeIn(1000);
});

Como se puede ver, en la llamada a fadeOut() estamos pasando como parámetros el valor 1000, que son los milisegundos tiene que durar el efecto fade out (fundido hacia transparente), y luego la función callback, que se ejecutará después de que fadeOut() haya terminado.

Como el método css() (se encuentra como primera instrucción de la función callback) es instantáneo, no necesita hacerse un callback para ejecutar el fadeIn(), sino que se puede escribir directamente en la siguiente línea de código. Así pues, se ve que el callback, al menos en este ejemplo, sólo es necesario hacerlo cuando se ejecutan funciones que realizarán un procesamiento prolongado.

Ejemplo completo de callback de funciones jQuery

En el siguiente código vamos a poder ver el ejemplo completo que hemos realizado en este artículo, donde podrás comparar la ejecución de los scripts que hacen uso de efectos jQuery con callback y sin callback.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Callback de funciones con jQuery</title>
  <style>
    body {
      font-family: Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }
    #micapa {
      background-color: #885104; 
      color: #fff; 
      font-weight: bold;
      padding:10px;
      max-width: 400px;
      line-height: 1.4rem;
      position: absolute;
      top: 10px;
      left: 10px;
    }
    #botones {
      position: fixed;
      bottom: 2rem;
    }
  </style>
</head>
<body>
  
  <div id="micapa">
    Este elemento de la página nos servirá para implementar algunos efectos encadenados con jQuery mediante un callback de funciones.
    <br><br>
    jQuery nos permite así asegurar que uno se hace después de otro!
  </div>

  <p id="botones">
    <button id="efectos">Procesar efectos sin callback</button>
    <button id="original">Poner en posición original</button>
    <button id="callback">Procesar efectos con callback</button>
  </p>

  <script src="../js/jquery-3.6.3.js">
  </script>
  <script>
    $(document).ready(function () {

      $("#original").click(function() {
        $("#micapa").css({ top: 10, left: 10 });
      });

      $("#efectos").click(function () {
        $("#micapa").fadeOut(2000);
        $("#micapa").css({ top: 300, left: 200 });
        $("#micapa").fadeIn(2000);
      });
      
      $("#callback").click(function() {
        $("#micapa").fadeOut(1000, function () {
          $("#micapa").css({ 'top': 300, 'left': 200 });
          $("#micapa").fadeIn(1000);
        });
      });

    });
  </script>
</body>
</html>

Conclusión

Hasta aquí, a lo largo de los capítulos de este manual de jQuery, hemos leído la introducción a este popular framework Javascript, tal como se puede ver en el apartado "How to use jQuery" publicada en la página de documentación. Desde DesarrolloWeb.com hemos enriquecido este tutorial de jQuery aportando nuevos ejemplos y explicaciones adicionales, encaminadas a que cualquier persona, con unos conocimientos básicos de Javascript, pueda entender y aprender a usar estas librerías de programación cross-browser. Ahora podemos hacer una pausa en este manual y volveremos pronto con nuevos artículos para explicar otros asuntos sobre la programación con jQuery.

A continuación podrás leer ejemplos de Ajax sencillos, que seguramente te darán una muestra excelente de las posibilidades de este framework. Luego, tendrás ocasión de seguir documentándote con muchos otros artículos que tratarán de explicarte jQuery desde principio a fin.