Проблема, когда две функции на стороне сервера вызываются в функции jQuery

Question

У меня есть jquery, в котором первый вызов серверной функции выполняется с помощью post, а затем с использованием getJSON (). Функция jQuery приведена ниже.

$("#move_up").live("click", function(e) {
            var rqdInstnId = GetRequiredId();
            //alert(rqdInstnId);
            $.post("/Instruction/MoveInstruction", { docId: DocId, instnId: rqdInstnId, action: "MoveUp" });
            //alert("moved");
            //$.ajaxSetup({ cache: false });
            $.getJSON(
            '/Instruction/InstructionTreeView',
            { docId: DocId, instnId: InstnId },
            function(data) {
                //alert(data);
                $.ajaxSetup({ cache: false });
                $('.initialTree').html(data);
                ExpandTree();
                PersistLayout();
                PersistSelection(rqdInstnId);
            });

        });

Здесь я сталкиваюсь со странной проблемой. При выполнении этой функции на стороне сервера сначала вызывается функция InstructionTreeView (точка останова), а затем - только основная функция MoveInstruction. Но когда я предупреждаю текст после $ .post ("/ Instruction / MoveInstruction", {docId: DocId, instnId: rqdInstnId, action: "MoveUp"}); функции удаляются правильно, как и ожидалось. Почему это происходит? Может ли кто-нибудь помочь с решением для этого?

Answer 1

Почему это происходит?

Потому что AJAX асинхронный. Оба запроса запускаются практически в одно и то же время, и время их попадания на ваш сервер не определено.

Если вы хотите, чтобы они выполнялись последовательно, вам нужно запустить второй запрос при успешном обратном вызове первого:

$('#move_up').live('click', function(e) {
    var rqdInstnId = GetRequiredId();
    $.post(
        '/Instruction/MoveInstruction', 
        { docId: DocId, instnId: rqdInstnId, action: "MoveUp" }, 
        function(result) {
            // The first POST request finished successfully
            // => now trigger the second
            $.getJSON(
                '/Instruction/InstructionTreeView',
                { docId: DocId, instnId: InstnId },
                function(data) {
                    $.ajaxSetup({ cache: false });
                    $('.initialTree').html(data);
                    ExpandTree();
                    PersistLayout();
                    PersistSelection(rqdInstnId);
                }
            });
        }
    });
});