Crear un callback en Javascript

Un callback es una función que se pasa como parámetro, y que va a dispararse en un momento determinado, normalmente se utiliza para resolver problemas que tienen que ver con operaciones asincrónicas de una aplicación.

Supongamos esta situación…

Tenemos una carrera de caballos, en donde cada caballo va a llegar a la meta en un tiempo X, que va a generarse al azar:

function correr(){
 //Tiempo al azar entre 1 y 60.
 var tiempo_en_llegar_en_segundos = Math.floor((Math.random() * 60) + 1);
 //Convertimos a dos decimales.
 tiempo_en_llegar_en_segundos = Math.round(tiempo_en_llegar_en_segundos * 100) / 100 
 return tiempo_en_llegar_en_segundos; 
}

Ahora podemos hacer una prueba con tres caballos:

var tiempo_caballo1 = correr();
var tiempo_caballo2 = correr();
var tiempo_caballo3 = correr();
console.log("El caballo 1 llega a la meta en " +  tiempo_caballo1 + " segundos.");
console.log("El caballo 2 llega a la meta en " +  tiempo_caballo2 + " segundos.");
console.log("El caballo 3 llega a la meta en " +  tiempo_caballo3 + " segundos.");

Sin embargo, y teniendo en cuenta el tipo de ejercicio que estamos tratando de hacer, no estamos cumpliendo con el objetivo que es simular una carrera de caballos en tiempo real.

Para eso vamos a recurrir a setTimeout(), una función nativa de javascript que va a recibir dos parámetros: La primera es una función de tipo callback, la cual va a ejecutarse en un determinado tiempo, y el segundo es justamente el tiempo en milisegundos.

Para ello vamos a cambiar nuestra función, en primer lugar vamos a agregar un parámetro de tipo callback, el cual vamos a pasar como parámetro. Creamos la función:

function correr(callback_meta){
 //Tiempo generado al azar en milisegundos.
 var tiempo_en_llegar_en_milisegundos = Math.floor((Math.random() * 60000) + 1000);
 setTimeout(function(){
    //Pasamos el tiempo a segundos. 
    var tiempo_en_llegar_en_segundos = (tiempo_en_llegar_en_milisegundos / 1000);
    //Convertimos a dos decimales.
    tiempo_en_llegar_en_segundos = Math.round(tiempo_en_llegar_en_segundos * 100) / 100 
    //Callback.
    callback_meta(tiempo_en_llegar_en_segundos);
 }, tiempo_en_llegar_en_milisegundos); 
}

Como vemos en la función, agregamos el parámetro callback_meta, el cual va a dispararse en el momento en que el caballo llegue a la meta. También agregamos un setTimeout(), para simular la corrida.

Notar también que el callback al tratarse de una función, podemos pasarle parámetros:

callback_meta(tiempo_en_llegar_en_segundos);

En este caso le pasamos un parámetro, el cual a diferencia de cualquier otro parámetro de función, tendrá una intención de salida, más que de entrada. Por lo cual, en este caso va a reemplazar la salida, return, que habíamos hecho en la función anterior, con el mismo dato: el tiempo que tardó el caballo en llegar a la meta:

Ahora podemos probar esto:

correr(function(tiempo_en_llegar_en_segundos){
 console.log("El caballo 1 llega a la meta en " +  tiempo_en_llegar_en_segundos + " segundos."); 
}); 
correr(function(tiempo_en_llegar_en_segundos){
 console.log("El caballo 2 llega a la meta en " +  tiempo_en_llegar_en_segundos + " segundos."); 
});
correr(function(tiempo_en_llegar_en_segundos){
 console.log("El caballo 3 llega a la meta en " +  tiempo_en_llegar_en_segundos + " segundos."); 
});

 


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *