Ordering of asynchronous javascript events

Question

I have the following code:

$("#submit_financials").live('click', function(event){
    event.preventDefault();

    // using serialize here to pass the POST variables to the django view function
    var serialized_data = $("#financials_filter_form").serialize()

    $.post("/ajax/custom_filter/", serialized_data, function(response){
        // create a graph
    });
    $.post("/ajax/force_download/", serialized_data, function(response){
        alert('hello');
    });

});

However, when I do this code, I get the response 'hello' before the graph. Why is this happening? And how would I change this such that I get the graph first?

javascript will do things in a particular order, but AJAX, by definition is asynchronous. — Jonathan M
– Jonathan M, Commented Jun 5, 2012 at 18:01
@RustyTheBoyRobot. This so not true! javascript is a synchronous language only! — gdoron
– gdoron, Commented Jun 5, 2012 at 18:01
@RustyTheBoyRobot that's a really inaccurate statement. Javascript IS a completely synchronous language, but AJAX calls are not. — bhamlin
– bhamlin, Commented Jun 5, 2012 at 18:01
The simple answer is that both requests get fired one right after the other and run concurrently; custom_filter seems to take longer to process on the server so that force_download returns first and invokes your callback. — Lucero
– Lucero, Commented Jun 5, 2012 at 18:04

gdoron · Accepted Answer · 2012-06-05 17:58:07Z

6

Async, you can never know which function runs\ finish first...

Think on async operations like telling a group of people to run 1 mile, do you know who will finish first? (Yes, Jon skeet, then Chuck Norris...)

You can use the a callack to run the second ajax:

$.post("/ajax/custom_filter/", serialized_data, function(response) {
    // create a graph
    ...
    ...

    $.post("/ajax/force_download/", serialized_data, function(response) {
        alert('hello');
    });
});

answered Jun 5, 2012 at 17:58

gdoron

151k59 gold badges302 silver badges376 bronze badges

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

Comments

Selvakumar Arumugam · Accepted Answer · 2012-06-05 18:03:51Z

5

You can try using deferred objects If you want to generate graph before alert but want both calls to be completed.

$.when (
   $.post("/ajax/custom_filter/", serialized_data),
   $.post("/ajax/force_download/", serialized_data)
).done(function(a1,  a2){
    /* a1 and a2 are arguments resolved for the 
    custom_filter and force_download post requests  */
   var customFilterResponse = a1[2]; 
   /* arguments are [ "success", statusText, jqXHR ] */

   //generate graph.

   alert('hello');
});

answered Jun 5, 2012 at 18:03

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

11 Comments

bhamlin Over a year ago

and here I was about to post an answer implementing this manually. Somehow never knew about $.when(). Thanks!

Rubens Mariuzzo Over a year ago

Few hours ago, I was feeling like I'm a truly jQuery Ninja, since I read this answer about $.when(...) and I felt like what is that?

user400654 Over a year ago

+1 Deferred is definitely the way to go if the two requests don't depend on each other but both need to be done before performing some action.

Selvakumar Arumugam Over a year ago

@RubensMariuzzo Well I am still learning too and this [ "success", statusText, jqXHR ] stuff is new and learned it while reading the docs >.<

user400654 Over a year ago

@gdoron If you thumb through the core, it creates a deferred object and applies it to the jqXHR object, then maps the success error and complete callbacks to the .done .fail and .always deferred callbacks. I didn't know you could simply apply a deferred object to an existing object that way. Interesting!

|

CrayonViolent · Accepted Answer · 2012-06-05 18:01:18Z

0

option 1 is to nest the post requests (gdoron's response). If this is not possible/practical, you can use a mutually scoped variable as a flag (change value in the response callback functions and then use setTimeout and recursion (or setInterval) to keep looking for a change in your "flag" variable and when you see it change, then pop the next $.post request

answered Jun 5, 2012 at 18:01

CrayonViolent

32.6k6 gold badges61 silver badges80 bronze badges

Collectives™ on Stack Overflow

Ordering of asynchronous javascript events

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related