How to Create a Callback in Javascript

From WikiHTP

A callback is a function that is passed as a parameter, and that will be triggered at a certain time, it is usually used to solve problems that have to do with asynchronous operations of an application.

Create a callback Function[edit]

For Example: We have a horse race, where each horse will reach the goal in a time X, which will be generated at random:

function correr () {
 // Random time between 1 and 60.
 var time_in_coming_in_seconds = Math.floor ((Math.random () * 60) + 1);
 // We convert to two decimals.
 time_in_coming_in_seconds = Math.round (time_in_coming_in_seconds * 100) / 100 
 return time_to_ arrive_in_seconds; 

Now we can do a test with three horses:

var cue_time1 = run ();
var cue_time2 = run ();
var camp_time3 = run ();
console.log ("Horse 1 arrives at the finish line in" + cue_time1 + "seconds.");
console.log ("Horse 2 arrives at the finish line in" + run_time2 + "seconds.");
console.log ("Horse 3 reaches the goal in" + time_cable3 + "seconds.");

However, and taking into account the type of exercise we are trying to do, we are not fulfilling the objective of simulating a horse race in real time.

For that, we are going to resort to setTimeout(), a native javascript function that will receive two parameters: The first one is a callback function, which will be executed in a certain time, and the second is just the time in milliseconds.

To do this we are going to change our function, first, we are going to add a callback parameter, which we will pass as a parameter. We create the function:

function correr ( callback_meta ) {
 // Time generated randomly in milliseconds.
 var time_in_ arrive_in_milliseconds = Math.floor ((Math.random () * 60000) + 1000);
 setTimeout (function () {
    // We spend time to seconds. 
    var tiempo_en_llegar_en_segundos = (tiempo_en_llegar_en_milisegundos / 1000);
    // We convert to two decimals.
    time_in_coming_in_seconds = Math.round (time_in_coming_in_seconds * 100) / 100 
    // Callback.
    callback_meta (time_to_ arrive_in_seconds);
 }, time_to_ arrive_in_milliseconds); 

As we see in the function, we add the callback_meta parameter, which will be triggered when the horse reaches the goal. We also add a setTimeout(), to simulate the run.

Note also that the callback, being a function, we can pass parameters to it:

callback_meta ( time_to_ arrive_in_seconds );

In this case we pass a parameter, which unlike any other function parameter, will have an intention of output, rather than input. Therefore, in this case it will replace the output, return, that we had done in the previous function, with the same data: the time it took the horse to reach the goal:

Now we can try this:

run (function ( time_to_ arrive_in_seconds ) {
 console.log ("Horse 1 reaches the goal in" +   time_in_ arrive_in_seconds + "seconds.");
run (function ( time_to_ arrive_in_seconds ) {
 console.log ("Horse 2 reaches the goal in" +   time_in_coming_in_seconds + "seconds.");
run (function ( time_to_ arrive_in_seconds ) {
 console.log ("Horse 3 reaches the goal in" +   time_in_coming_in_seconds + "seconds.");

About This Tutorial

This page was last edited on 31 January 2019, at 19:39.