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
– Blazemonger, Commented Mar 17, 2014 at 19:38
Also explain why there is a requirement for this to wait until flow is assigned. — Erik Philips
– Erik Philips, Commented Mar 17, 2014 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
– Terry Chen, Commented Mar 17, 2014 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
– Brad, Commented Mar 17, 2014 at 19:45

David · Accepted Answer · 2014-03-17 19:37:02Z

4

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.

answered Mar 17, 2014 at 19:37

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Erik Philips · Accepted Answer · 2014-03-17 19:36:27Z

2

Anything wrong with:

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

answered Mar 17, 2014 at 19:36

Erik Philips

54.8k11 gold badges133 silver badges158 bronze badges

2 Comments

Brad Over a year ago

He specifically says he doesn't want to do that... but who knows why.

Terry Chen Over a year ago

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

Brad · Accepted Answer · 2014-03-17 19:39:30Z

0

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);
});

Comments

lshettyl · Accepted Answer · 2014-03-17 19:41:04Z

0

Or:

var request = $.ajax({
    url: "qa/version.json",
    dataType: "json"
});

request.done(function(response){
    $(".flow").append(response.Version);
});

answered Mar 17, 2014 at 19:41

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

Collectives™ on Stack Overflow

Design to block asynchronous javascript

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related