Podemos empezar diciendo que en JavaScript las funciones son asíncronas. Esto quiere decir que tu puedes llamar una función y antes de finalizar esta, si es que tienes otra función que llamar, comenzara la otra función a funcionar.
Los callback tienen la característica de no ser asíncrono, es decir, que se van ejecutando hasta que la otra función acabe su ejecución. Pero, ¿Que es un callback? prácticamente es la llamada de una función que se envía por parámetro. A lo que me refiero es que a una función A le puedes enviar como parámetro una función B (callback) y este se ejecutara adentro de la función A. Y haciendo otra pregunta:¿Por que se puede hacer esto? La respuesta es que en JavaScript las funciones se tratan como objetos, es decir, que las funciones son objetos de tipo función.
es la llamada de una función que se envía por parámetro.
|
1 2 3 4 5 6 7 8 9 |
function haceAlgo(miCallback){ //hago algo y llamo al callback avisando que terminé miCallback(); } haceAlgo(function(){ console.log('terminó de hacer algo'); }); http://fernetjs.com/2011/12/creando-y-utilizando-callbacks/ |
En el ejemplo anterior a la función haceAlgo se le envía como parámetro una función, la cual solo va a desplegar en consola un mensaje. En el cuerpo de la función haceAlgo se va a ejecutar la función enviada como parámetro. Esto es importante si queremos que una función, como lo dije anteriormente, se ejecute hasta que los procedimientos que vienen detrás de él acaben de procesar.
Poniendo más énfasis a este tema de la asincronía para dejarlo más claro veremos otro ejemplo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function haceAlgo(callbackPaso1, callbackPaso2, callbackTermino){ //algo aca callbackPaso1('paso 1'); //sigo... algo aca callbackPaso2('paso 2'); //sigo ... y termino callbackTermino('terminó'); } haceAlgo( function(quePaso){ console.log(quePaso); }, function(quePaso){ console.log(quePaso); }, function(queHizo){ console.log(queHizo); }); http://fernetjs.com/2011/12/creando-y-utilizando-callbacks/ |
En este ejemplo se puede ver mejor la sincronía de los callbacks. Al llamar la función haceAlgo va a empezar a ejecutarse el paso1, hasta que no acabe de realizar sus tareas, el paso2 va a poder empezar, y así mismo, hasta que no acabe el paso2 va empezar a ejecutarse el paso3. Esto no haya sucedido si los procedimientos no fueran callbacks. Ya que si los hubiéramos llamado a ejecutar fuera de una función, el paso2 haya empezado a ejecutarse antes de que terminara el paso1 y, el paso3 haya empezado sus tareas antes de que terminara el paso2.
La forma que hemos visto de llamar los callbacks, es decir, de poner toda la función dentro de los parámetros, no es la única forma, hay otra forma, que para mi es más limpia. Esto es declarando primero las funciones y simplemente poniendo el nombre de la función en los parámetros. Como veremos a continuación.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function haceAlgo(callbackPaso1, callbackPaso2, callbackTermino){ //algo aca callbackPaso1('paso 1'); //sigo... algo aca callbackPaso2('paso 2'); //sigo ... y termino callbackTermino('terminó'); } function paso1(quePaso){ console.log(quePaso); } function paso2(quePaso){ console.log(quePaso); } function termino(queHizo){ console.log(queHizo); } haceAlgo(paso1, paso2, termino); http://fernetjs.com/2011/12/creando-y-utilizando-callbacks/ |
Como vemos, primero se declaran las funciones paso1, paso2 y paso3. después de hacer esto se envían como parámetros en la función hacerAlgo que es donde se van a ejecutar.
Referencias:
- http://fernetjs.com/2011/12/creando-y-utilizando-callbacks/
- http://qbit.com.mx/blog/2013/07/03/como-hacer-funciones-callbacks-en-javascript/
- https://danlaho.wordpress.com/2013/08/27/usando-callbacks-javascript/
