Asynchronous Programming Example in Javascript - Add Two Numbers

addTwoNumbersAsync.js

var executionTimes = []; // an array to hold the time stamps at various stages, during callbacks

// this function simulates an async function to get the X value
function getXValue(callback) {
  var num = ~~(Math.random() * 100); //get a number between 0-100 and coerce to an Integer using '~~'
  console.log('X will be: ', num);
  var delay = ~~(Math.random() * 5000); // set a random delay btw 0-5 sec
  console.log('X Delay (in ms): ' + delay);

  //now we set a timeout to invoke to callback function
  var timedFn = window.setTimeout(function() {

      //log the activity using a time stamp
      executionTimes.push({
        'Fetched X Value': new Date()
      });

      //invoke the callback with the X value
      callback(num);
    },
    delay);
}

// this function simulates an async function to get the Y value, similar to getXValue
function getYValue(callback) {
  var num = ~~(Math.random() * 100); //get a number between 0-100 and coerce to an Integer
  console.log('Y will be: ', num);
  var delay = ~~(Math.random() * 5000); //random delay
  console.log('Y Delay(in ms): ' + delay);

  //set up the timeout with callback and timestamp 
  var timedFn = window.setTimeout(function() {
      executionTimes.push({
        'Fetched Y Value': new Date()
      });
      callback(num);
    },
    delay);
}


function add(getX, getY, cb) {
  var x, y;

  //call the getX parameter function and supply a callback function
  getX(function(xval) {
    x = xval; //store the returned value
    console.log('Received X Value');
    if (y != undefined) { //if we already received the Y value, invoke the supplied callback cb
      console.log('Callback called after getting X');
      cb(x + y);
    }
  });

  //call the getY parameter function and supply a callback function
  getY(function(yval) {
    y = yval;
    console.log('Received Y Value');
    if (x != undefined) { //if we already received the X value, invoke the cb function
      console.log('Callback called after getting Y');
      cb(x + y);
    }
  });
}

//the callback function that will be supplied to the add() function we created 
var finalCallback = function(sum) {
  executionTimes.push({
    'Done': new Date()
  }); // set the final timestamp
  console.log('The Sum:' + sum); //show the sum that we received in the callback
  displayExecutionTimes(); //display all the exection times now that we are done.

}

//this function will display all the time stamps and calculate the duration from start time
function displayExecutionTimes() {
  console.log('Start Time: ' + startTime.toString()); //display the start time
  for (var i = 0; i < executionTimes.length; i++) { //iterate through the array
    var time = executionTimes[i]; //get the custom timestamp object
    for (var key in time) { // iterate over the custom time stamp object
      var curTime = time[key]; //get the date/timestamp
      var diff = (curTime.getTime() - startTime.getTime()); //calculate the difference from start
      console.log(key + ": " + curTime.toString() + " --- " + diff / 1000 + " seconds ---"); //log to the console.

    }
  }


}
var startTime = new Date(); //log the start time before we call the add function.
add(getXValue, getYValue, finalCallback); //kick off the async adding!!!

Thanks for sharing this.