How to deal with asynchronous ajax calls which themselves are triggered asynchronously

Question

I have this problem:

The user clicks on a button A, then something gets created with an ajax call. The call returns some data.

Later, the user (enteres some text into an input and) will click on button B. This will start another ajax call. Now, this one needs the returned data from the first request.

This is no problem when the first call is fast enough. However, I have to assume that it could take a while, so when the user clicks on button B the first call may not be completed.

I don't want to disable button B as long as the first lasts. The user should click on button B even if the first ajax call has not yet completed. So it seems that I need to chain/queue the calls somehow.

How could I do this? And how could this be done with a longer sequence of calls. And is there a name for this scenario, is there already a pattern for it? Or am I just blind?

Rudimentary sample code:

$('button.a').click(function () {
    $.post('some/url/for/action/a', {})
        .done(function (returnedData) {

        })
});

$('button.b').click(function () {
    // now I need something from returnedData, which may not be available yet
    $.post('some/url/for/action/b', {something: returnedData.something})
        .done(function () {

        })
});

Note: the final aim is to speed up the process to improve UX.

(Feel free to improve the title of the question. I couln't express that better.)

Answer 1

If you're OK working with the most recent versions of the ECMAScript spec, then you may want to look at using Promises. There's a seriously great explanation of Promises on Google's documentation for the web, but they're basically objects that we can use to wait for stuff to finish happening asynchronously.

If you wrap your first ajax call inside a Promise object, then you can come back to it later on (in your case, after the user clicks button B) and see if it's finished yet. If it has, then() you can do something in response!

var promiseA; // this variable will hold our Promise object

function postActionA() {
  return new Promise(function(resolve, reject) {
    $.post('some/url/for/action/a', {}).done(resolve); // this is the magic
    // when the ajax call completes, it calls the 'resolve' function
  });
}

$('button.a').click(function () {
  promiseA = postActionA();
  // by assigning our promise object to a variable
  // we can inspect its state later on
  promiseA.then(function(returnedData) {
    // do stuff with returnedData here if you like
  });
});

$('button.b').click(function () {
  // assuming that promiseA was assigned earlier
  // we can wait for it to resolve, then make our next ajax call
  promiseA.then(function (returnedData) {
    $.post('some/url/for/action/b', {something: returnedData.something})
      .done(function () {
      // do something after the second ajax call completes
      });
  });
});

If you're not able to use the latest version of ECMAScript and would rather use jQuery, we can make use of jQuery's deferred objects to do something similar.

var deferredA; // this variable will hold our Deferred object

$('button.a').click(function () {
  deferredA = $.post('some/url/for/action/a', {});
  // by assigning our deferred object to a variable
  // we can inspect its state later on
  deferredA.done(function(returnedData) {
    // do stuff with returnedData here if you like
  });
});

$('button.b').click(function () {
  // assuming that deferredA was assigned earlier
  // we can wait for it to resolve, then make our next ajax call
  deferredA.done(function (returnedData) {
    $.post('some/url/for/action/b', {something: returnedData.something})
      .done(function () {
      // do something after the second ajax call completes
      });
  });
});

Answer 2

My idea is based on queueing the ajax call on button click. Then the call is picked up from the queue and fired.

This way you can click random sequences (like A,B,A,A,B,A,B,B) and every subsequent call will wait for previous ones.

Passing data from one call to another is done via global variable.

The code:

var queue = [];
var processing = false;
var dataFromLastCall = {}; //data from previous call

function register(callParams){
  queue.push(callParams);
  if(processing == false){
    process(queue);
  }
}

function process(){
  processing = true;
  var call = queue.shift();

  $.when(jQuery.ajax(call)).then(function(){
    if(queue.length > 0){
      process(); //get another
    }else{
      processing = false; //all done
    }
  });
}

$("button.a").click(function(e){
  e.preventDefault();
  register({
    type: 'POST',
    url: 'some/url/for/action/a',
    data: dataFromLastCall,
    success: function(newData){
      dataFromLastCall = newData;
    }
  });
});

$("button.b").click(function(e){
  e.preventDefault();
  register({
    type: 'POST',
    url: 'some/url/for/action/b',
    data: dataFromLastCall,
    success: function(newData){
      dataFromLastCall = newData;
    }
  });
});

Note, that this sample does not handle error scenarios.

Answer 3

var isFirstCallFinished = false;


$('button.a').click(function () {
$.post('some/url/for/action/a', {})
    .done(function (returnedData) {
         isFirstCalFinished = true;
    })
});

$('button.b').click(function () {
// now I need something from returnedData, which may not be available yet
setInterval(function () {
 if(isFirstCallFinished)  {
 // Cancel Interval
 // Call postMe()
 }
}, 1000);
});
function postMe() {
 $.post('some/url/for/action/b', {something: returnedData.something})
    .done(function () {

    })
  });
 }

Answer 4

You actually want to make a synchronous call. I suggest you to use $.ajax instead of $.post since it's more customizable.

Your button B function would be something like this:

$.ajax({
  type: 'POST',
  url: 'some/url/for/action/b',
  data: data,
  success: success,
  async:false
});

The async:false option makes your request synchronous.