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.