Упорядочение Asynchronous JavaScript события

Question

У меня есть следующий код:

$("#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'); 
    }); 

}); 

Однако, когда я делаю этот код, я получаю ответ «привет» перед тем граф. Почему это происходит? И как я могу изменить это так, чтобы сначала получить график?

Answer 1

Асинхронных, вы никогда не можете знать, какую функцию работает \ закончить первый ...

Подумайте об асинхронных операциях, как рассказывает группу людей бежать 1 милю, вы знаете, кто финиширует первый? (Да, Джон тарелочкам, а затем Чак Норрис ...)

Вы можете использовать в callack для запуска второго Аякса:

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

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

Answer 2

вариант 1 является гнездиться почтовые запросы (ответ gdoron в). Если это невозможно/практично, вы можете использовать переменную с ограниченной областью действия в качестве флага (изменить значение в функциях обратного вызова ответа, а затем использовать setTimeout и recursion (или setInterval), чтобы продолжать поиск изменений в вашей переменной «flag» и когда вы видите это изменить, то поп просьбой об .POST следующий $

Answer 3

вы можете попробовать использовать отложенные объекты Если вы хотите создать график до готовности, но хотите и вызовы будут завершены.

$.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'); 
});