jQuery: управление порядком событий

Question

У меня проблемы с некоторым кодом JQuery, который у меня есть.

Используя $ .each, я перебираю несколько значений и вызываю код php. После завершения цикла $ .each я бы хотел загрузить div с определенным содержимым. Я попытался загрузить div после оператора $ .each, но оператор load все еще выполняется первым, отображая неверное значение. Когда я помещаю эту нагрузку в $ .each, она работает, хотя она загружается после каждой итерации, а не в конце. Есть идеи?

Вот соответствующая часть моего кода:

$.each(steps, function(n,step){
            $.post("utility.php", {
                utility: "getStepValue",
                step: step
            },
            function(data) {
                // offset clock
                var step_value = data;
                $.post("utility.php", {
                    utility: "offsetClock",
                    step_value: step_value
                },
                function(data){
                    // when load statement inserted here, it works fine
                });
            });
        }
    });

    // this statement finishes before the $.each, showing the wrong value
    $("#clock").load("utility.php", {
        utility: "displayClock"
    });

Answer 1

Получите номер steps. Затем выполните $("#clock").load("utility.php" ... внутри второго обратного вызова в цикле, только если текущий индекс равен числу шагов - 1. Примерно так:

var count = steps.length;
$.each(steps, function(n,step){
            $.post("utility.php", {
                utility: "getStepValue",
                step: step
            },
            function(data) {
                // offset clock
                var step_value = data;
                $.post("utility.php", {
                    utility: "offsetClock",
                    step_value: step_value
                },
                function(data){
                  if(n == count - 1){
                    $("#clock").load("utility.php", {
                      utility: "displayClock"
                    });
                  }
                });
            });
        }
    });