make an asynchronous call midstream in a procedural process within JavaScript

A procedural process is going to have to be broken into two functions around an asynchronous call or more yet if there is more than one such call in a series of happenings. For example consider this process:

1. We start with the number 1.
2. We fish for the number 2 asynchronously and add it to the 1 when we get ahold of it.
3. We then add the sum of the 1 and the 2 to the number 3.
4. We throw an alert with the sum of the 1, the 2, and the 3 in it which should be equal to 6.

 
 

Well, the following approach will NOT work:

$(function () {
   myProcedure();
});
function myProcedure() {
   var myValue = 1;
   myValue = myAsynchronousThing(myValue);
   myValue = myValue + 3;
   alert(myValue);
}
function myAsynchronousThing(myValue) {
   $.ajax({
      type: "POST",
      url: '/GoGetTwo/',
      dataType: 'json',
      success: function(result) {
         return myValue + result.Whatever;
      }
   });
}

 
 

In the above approach, the myAsynchronousThing function will return undefined and the alert will ultimately throw NaN. That is because the value in the success callback within myAsynchronousThing returns asynchronously. I struggled today to find a way to force this value to return as shown in a scenario above, but everything I saw in my Googling ultimately suggested that I needed to give up on a strict need to return something synchronously by way of somehow manhandling the asynchronous into the synchronous. The function that would use the asynchronous call just needs to be broken up into two bookend functions around an asynchronous call like so:

$(function () {
   myProcedure();
});
function myProcedure() {
   var myValue = 1;
   myAsynchronousThing(myValue);
}
function myProcedureContinues(myValue) {
   myValue = myValue + 3;
   alert(myValue);
}
function myAsynchronousThing(myValue) {
   $.ajax({
      type: "POST",
      url: '/GoGetTwo/',
      dataType: 'json',
      success: function(result) {
         myProcedureContinues(myValue + result.Whatever);
      }
   });
}

 
 

The above will work just fine. Also, a variation on the above is:

$(function () {
   myProcedure();
});
function myProcedure() {
   var myValue = 1;
   myAsynchronousThing(myValue, myProcedureContinues);
}
function myProcedureContinues(myValue) {
   myValue = myValue + 3;
   alert(myValue);
}
function myAsynchronousThing(myValue, useMeAtTheEnd) {
   $.ajax({
      type: "POST",
      url: '/GoGetTwo/',
      dataType: 'json',
      success: function(result) {
         useMeAtTheEnd(myValue + result.Whatever);
      }
   });
}

 
 

As an aside, do you know who Chronos (or Khronos) is in Greek myths? He is the God of time. Hence asynchronous and synchronous are named for him (or perhaps a more generic version of the same Greek word for time) as are words like chronological. He doesn't look very happy in this image. Maybe it's my first (bad) implementation in this blog posting that has him cranky. I don't see why the others would make him sour per say. I do tend to annoy.

Having typed up this blog posting, I am now realizing that the image above, which comes straight from the Wikipedia page I give a link to, has 666 on it! Also, I give three separate examples which each try to return a 6. Spooky! I promise this is coincidence and not some hidden satanic agenda on my part. :P I could try to change the content above, but I'm just going to let it be.