Skip to content

Callback propio para tus script en jQuery

11 noviembre 2010

Callback es un término que se utiliza para obtener dentro de una función, la dirección de otra función ajena de forma que podamos invocarla en el momento necesario dentro de la función principal. Esta técnica de programación se utiliza mucho en lenguajes dinámicos como por ejemplo Javascript. En esta entrada vamos a ver como implementar una función que reciba por parámetro otra función Callback.

El objetivo es el siguiente: Si miráis la API de jQuery, veréis que la gran mayoría de funciones tienen un parámetro llamado: handler(eventObject), que no es más que una función que va a ejecutarse cada vez que se lance el evento determinado. Por ejemplo, la función .click() admite este tipo de parámetro y consiste en: una vez hecho click en un elemento de la página, debe ejecutarse la función que le hayamos pasado por parámetro. Por tanto, vamos a ver cómo podemos conseguir este mismo comportamiento dentro de una función diseñada por nosotros mismos.

Primero definimos nuestra función:

function boo(callBack){
  //Código de nuestra función 
  //....
 //Llamada Callback
 if (typeof callBack == 'function'){
    callBack.call();
  }
}

De esta forma, una vez que nuestra función boo termine de ejecutar su código, ejecutará el código incluido dentro de la función cuya dirección está almacenada en callBack.

Para hacer la llamada a la función:

boo(function(){
  alert('Probando callback');
});

Así, primero se ejecutará todo el código de la función boo y posteriormente se llamará al código incluido en la función, en este caso, anónima. La comprobación de typeof y la llamada a call(), podemos colocarla dónde mejor convenga a la ejecución de nuestro programa, una vez terminada la ejecución call(), el programa continúa ejecutándose a partir de la línea en la que se había producido la llamada a call().

Actualización:

Vamos a ver cómo podemos preparar nuestra función para que reciba parámetros a la hora de invocarla mediante callback.

En este caso, si queremos que nuestra función pueda recibir parámetros, no podemos utilizar una función anónima (o al menos yo no he encontrado como). Sin embargo, podemos definir una función con su nombre y sus parámetros de entrada y utilizarla como parámetro de entrada en la función boo():

function myFunction(msg,num){
  alert('This is your message: '+msg+', and this is your second parameter: '+num);
}

Simplemente nos quedaría cambiar la llamada actual a la función boo(), para que quede del siguiente modo:

boo(myFunction('Helloooo Rekkeb',9));

La propia llamada .call() dentro de la función boo(), se encargará de utilizar estos parámetros y pasarselos nuevamente como entrada cuando invoquemos: callback.call()

Cualquier mejora, sugerencia, … será bien recibida 😉

Anuncios
6 comentarios leave one →
  1. victor kresisch permalink
    11 marzo 2011 00:20

    Esto alguna vez anduvo?
    Lo probé y no funciona.

    Saludos desde Buenos Aires

    • rekkeb permalink*
      11 marzo 2011 00:34

      Yo lo he utilizado en varios proyectos y siempre ha funcionado. De hecho, como puedes ver el código es muy sencillito.

  2. Eduardo permalink
    14 marzo 2012 22:44

    Si funciona, muchas gracias. Lo que no puede hacer fue enviar parámetros, me llegan como undefined

    • rekkeb permalink*
      15 marzo 2012 23:36

      Hola Eduardo, gracias por el apunte, voy a actualizar la entrada y así muestro como pasar parámetros a la función callback 😉

    • 10 agosto 2012 17:24

      function foo(callback){
      /* things of foo here */
      if(typeof callback == ‘function’){
      callback.call(this, 5, “text”);
      // callback.apply(null, [5, “text”]);
      }
      }

      foo(function(num, str){
      console.log(“num is: ” + num+ ” and str is: ” + str);
      console.log(this); // “this” here is object window
      });

  3. 12 abril 2017 20:48

    Buen aporte funciona muy bien, gracias.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: