jquery multiple select делает загрузку ajax, когда был выбран предварительный выбор

Question

Я немного упростил это, чтобы объяснить.

Если у меня есть несколько зависимых отступов, давайте возьмем пример простого региона страны.

Сначала выберите страны загрузки, а второй выберите грузы, относящиеся к выбранному стране, а третий выбирает регион, относящийся к выбранному городу.

Я не хочу устанавливать асинхронное значение false.

$(document).ready(function() { 
    // Enumerate select lists 
    // Country is already filled 

    enumerateChildDropDown("Town", $("Country").val()); 

    // This shouldnt load until the above has finished 
    enumerateChildDropDown("region", $("Town").val()); 

    // Note there could be many more of these 
}); 

function enumerateChildDropDown(selectId, parentId) { 

    $.ajax({ 
    type: "POST", 
    dataType: "json", 
    url: "@Url.Action("foo", "foo")", 
    data: { parentId: parentId}, 
    }).done(function (returnedData) { 
    // Fill selectId here etc 
    }).fail(function (jqXHR, exception) { 
    // Some Alert 
    }); 
} 

Этот пример был значительно упрощен, поскольку реальное приложение загружает много данных для каждого выбора и не имеет ничего до 10+ зависимых полей, следовательно, использование одной функции AJAX.

Я рассмотрел возможность использования какого-либо обратного вызова, но я нахожу разные примеры версий JQuery, что делает вещи немного запутанными. Я хочу придерживаться JQuery и не использовать какую-либо другую библиотеку, то есть knockoutjs.

Answer 1

Это та вещь, я искал для.

https://github.com/gnarf/jquery-ajaxQueue

Answer 2

Вы можете использовать обратные вызовы, отсрочки или обещания. Вы даже можете синхронизировать AJAX jQuery, поворачивая async на false (по умолчанию он будет равен true).

Если вы хотите придерживаться JQuery асинхронном, то я предлагаю взглянуть здесь: http://api.jquery.com/promise/

Из примеров:

var div = $("<div />"); 

div.promise().done(function(arg1) { 
    // will fire right away and alert "true" 
    alert(this === div && arg1 === div); 
});