Design to block asynchronous javascript

Question

var flow;

$.ajax({
    url: "qa/version.json",
    dataType: "json",
    success: function( response ){ 
        flow = response.Version;
    }
});

$(".flow").append(flow);

Due to the nature of JS asynchronous design, the append would will be execute before it is being assigned a value in ajax call. What is the best way to tell the script to wait until flow gets assigned in ajax call, then do the append? I do not want to put append right below the success, I would like to keep them separate.

Please explain *why* you want to keep the `success` callback and the `.append()` call separate. Doing so is the correct approach. — Blazemonger, Mar 17 '14 at 19:38
Also explain *why* there is a requirement for this to *wait until flow is assigned*. — Erik Philips, Mar 17 '14 at 19:40
Because I am not just assigning flow, say if I have 50 other parameters from json to get appended. I just think it's kinda messy, and I like to have all the appends in one place. — Terry Chen, Mar 17 '14 at 19:43
@TerryChen You can always reference a function by name there... you don't have to physically put the code there. Alternatively, see my answer below for simply adding this as a handler for when the Deferred object is resolved. — Brad, Mar 17 '14 at 19:45

score 4 · Answer 1 · answered Mar 17 '14 at 19:37

The "best way" is to perform the action in response to the asynchronous action:

$.ajax({
    url: "qa/version.json",
    dataType: "json",
    success: function(response){ 
        $(".flow").append(response.Version);
    }
});

If you want to "keep them separate" then you can define a function to call in the response:

var appendFlow = function (flow) {
    $(".flow").append(flow);
};

$.ajax({
    url: "qa/version.json",
    dataType: "json",
    success: function(response){ 
        appendFlow(response.Version);
    }
});

Separating the code into its own function is simply a matter of organizing your code into re-usable components. Either way, by design the response can't be processed until it's received, so you'd perform your actions in response to the asynchronous call.

score 2 · Answer 2 · answered Mar 17 '14 at 19:36

2

Anything wrong with:

$.ajax({
  url: "qa/version.json",
  dataType: "json",
  success: function( response ){ 
    flow = response.Version;
    $(".flow").append(flow);
  }
});

answered Mar 17 '14 at 19:36

Erik Philips

53,428
11
128
150

He specifically says he doesn't want to do that... but who knows why. – Brad Mar 17 '14 at 19:37
Because I am not just assigning flow, say if I have 50 other parameters from json to get appended. I just think it's kinda messy, and I like to have all the appends in one place – Terry Chen Mar 17 '14 at 19:45

score 0 · Answer 3 · answered Mar 17 '14 at 19:39

I have no idea why you don't want to put your success handler in the spot for a success handler, but here's an alternative that may help you.

jQuery returns a Deferred instance when you make AJAX requests. You can use its .done() method to set up a callback later.

var dfd = $.ajax( /* your code here, without the success handler */);

// later on...
dfd.done(function (response) {
  $('.flow').append(response.Version);
});

Design to block asynchronous javascript

4 Answers4