Los Callbacks en JavaScript son como su propio nombre, en inglés, indica, llamadas de vuelta, quiere decir que cuando invoco una función pasándole como parámetro otra función (el callback) esta función parámetro se ejecuta cuando la función principal ha terminado de ejecutarse. O cuando a nosotros nos interese…
Este concepto que parece muy complicado, es en realidad muy sencillo de entender si lo hacemos con casos prácticos, por ejemplo:
function funcionPrincipal(callback){
alert('hago algo y llamo al callback avisando que terminé');
callback();
}
funcionPrincipal(function(){
alert('terminó de hacer algo');
});
Aquí vemos como la función funcionPrincipal se ejecuta recibiendo un argumento que es otra función y que se ejecuta después de que termine su labor llamando a callback.
Pero no te preocupes si no lo has entendido, vamos a hacer algunos ejemplos más para ir cogiéndolo, en realidad es muy sencillo.
Siguiendo con el caso anterior, podemos hacer incluso que la función callback reciba argumentos que se envían desde la función principal…
function funcionPrincipal(callback){
alert('hago algo y llamo al callback avisando que terminé');
callback('Miguel');
}
funcionPrincipal(function(nombre){
alert('me llamo ' + nombre);
});
Con esto ya vemos la fuerza que puede tener esta forma de programación, pero ahora imaginemos que queremos encadenar diferentes funciones con callbacks, lo cual es muy sencillo siguiendo con la misma lógica…
function funcionPrincipal(callback1, callback2, callback3){
//código de la función principal
callback1();
//más código de la función principal
callback2();
//más código de la función principal
callback3();
//más código si fuera necesario
}
funcionPrincipal(
function(){
alert('primer callback');
},
function(){
alert('segundo callback');
},
function(){
alert('tercer callback');
}
);
Aquí vemos como al invocar a la función principal se le pasan como argumentos las tres funciones, que se ejecutan, las cuales podrían recibir parámetros… como hemos visto más arriba, pero de este modo el código queda un poco sucio, ya que no podemos ver claramente las funciones, de modo que podemos declarar las funciones que se enviarán como argumentos aparte, lo cual nos permite también utilizarlas en otras partes del código, tal y como vemos en el siguiente ejemplo:
function funcionPrincipal(callback1, callback2, callback3){
//código de la función principal
callback1();
//más código de la función principal
callback2();
//más código de la función principal
callback3();
//más código si fuera necesario
}
function callback1(){
alert('primer callback');
}
function callback2(){
alert('segundo callback');
}
function callback3(){
alert('tercer callback');
}
funcionPrincipal(callback1, callback2, callback3);
Podemos observar cómo se declaran todas funciones y luego se pasan como argumentos de la función principal para poder utilizarlas dentro de la misma. Pero aunque esto daría para otra entrada, vamos a ver por encima el uso de otra función de javaScript llamada setInterval(), esta función nos sirve para retardar acciones, y necesita dos parámetros para funciones; una función que invoca a la función que vamos a usar y un valor numérico que dice en milisegundos el retraso y actualización de la función invocada.
Esto que parece un lío, vamos a verlo en un código donde mostraremos un alert, un reloj y un texto, y donde el reloj se va modificando cada segundo y el texto tardará en aparecer 3 segundos:
<h3 id="demo"></h3>
<h3 id="demo2"></h3>
<script>
function funcionPrincipal(callback1, callback2, callback3){
//código de la función principal
callback1();
//más código de la función principal
var miVar = setInterval(function(){ callback2() }, 1000);
//más código de la función principal
var miVar2 = setInterval(function(){ callback3() }, 3000);
//más código si fuera necesario
}
function callback1(){
alert('primer callback');
}
function callback2(){
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
function callback3(){
document.getElementById("demo2").innerHTML = 'Esto es el callback3';
}
funcionPrincipal(callback1, callback2, callback3);
</script>
El ejemplo en esencia es el mismo, cambiando las funcionalidades de las funciones de callback, pero hemos añadido en las líneas 8 y 10 la función setInterval() para que se retrasen e incluso se actualice, aprovechando de paso la forma de hacer un reloj en javascript…
Con esto tenemos ya los conocimientos básicos para entender los callbacks en javascript y llegar a usarlos cuando nos veamos en la necesidad.
Tienes novia?
jajajaja ¿en serio? jajaja
no, no tengo XD
HOLA MIGUEL:
function fPedirCoti(wId){
document.getElementById(‘iPedir’).disabled = true;
document.getElementById(‘iPedir’).style.cursor = ‘wait’;
document.getElementById(‘iPedir’).style.color = ‘#b7b7b9’;
// ACTUALIZO EL PEDIDO EN LA TABLA DE PEDIDOS
pwcRecargar(‘PWCPedirCoti2.php’,’#iPedir1′,wId);
// LIMPIO LAS CAJAS CON DATOS
fLimpia();
// ENVIO LA FORMA
document.getElementById(«iFrmCotiza»).submit();
}
// MANDO LLAMAR ESTA FUNCION CON:
<input name="nPedir" id="iPedir" class="cBtn1" onclick="this.disabled=true;fPedirCoti('’)» type=»button» value=»Levantar pedido» tabindex=»-1″ title=»Enviar Cotización a ERP (Levartar pedido)» disabled />
COMO PODRIA CORRER PRIMERO pwcRecargar(), DESPUES DE QUE TERMINO fLimpia() Y TERMINANDO ESTA, EL SUBMIT ?
PORQUE AL PARECER NO ME SIGUE ESTE ORDEN DE EJECUCION Y ESO ME CREA EL CONFLICTO DE QUE ME MUESTRE POR EJEMPLO 3 ARTICULOS EN VEZ DE 10 QUE ESTOY INSERTANDO EN EL MOMENTO.
ESPERO HABERME EXPLICADO CORRECTAMENTE Y PUEDAS AYUDARME
GRACIAS
Hola, ante todo perdón por el retraso, ultimamente no he tenido mucho tiempo de estar con el blog ni con apenas nada, ando con problemas de salud familiar y cambiando de trabajo.
No obstante en tu código no ve que uses los callbacks, JavaScript por defecto va a intentar ejecutarlo todo a la vez y por eso te da los errores, con los callbacks lo que haces es que algo no se ejecute hasta que lo anterior no haya terminado.
De este modo tu deberias de hacer un callback desde pwcRecargar a fLimpia y de este otro a que se realice el submit…
En el siguiente enlace te dejo un código muy bueno que te puede iluminar en tu proyecto:
Ejemplo de callbacks anidados
Espero que te sirva de ayuda.
Gracias me sirvió para entender.
Igual queda mas claro si escribis las lineas 8 y 10 de la siguiente forma:
var miVar = setInterval(callback2(), 1000);
//más código de la función principal
var miVar2 = setInterval(callback3(), 3000);
//más código si fuera necesario
(sin las function{ } )
Muchas gracias!
es otra forma de presentarlo, si te ha venido mejor así también puedes hacerlo, según la situación, necesidades y estilo se puede hacer de muchas formas.
Gracias por comentar 🙂
Muchisimas gracias amigo, estaba viendo un curso sobre NODE y el tema de los callback no me quedaba claro, incluso con la documentación de Mozilla. Gracias a ti me quedo clarísimo el concepto.
Me alegro muchísimo de que te haya servido.
gracias.
Buen articulo, me quedo mas claro los callback.
¿ Tienes alguno de Generadores… ???
Con tus buenas explicaciones , seguro que llego a terminar de entenderlo.
Gracias
Muchas gracias por tu comentario, me alegro que te haya servido pero por desgracia de generadores no tengo nada, lo siento…
buen post amigo aca tratando de comprender los callbacks y aparte la invocacion a funciones con la nomenclatura => me tienen hecho un enredo, tienes por casualidad info de ese tipo ?
Con eso ya te estas metiendo en objetos…
Fran Díaz liked this on Facebook.