JQuery. Каждый цикл

Question

Я совершенно новичок в jquery, но у меня есть цикл .each, который выбирает некоторые данные, используя ajax, а затем обновляет элементы списка. Прямо сейчас цикл .each выполняет все элементы списка одновременно ... Мне нужно, чтобы он выполнил первый, дождался его завершения, затем выполнил второй и т. Д. И т. Д. Я НЕ хочу использовать задержку. Я хочу, чтобы цикл фактически ждал, пока данные не будут извлечены, а затем перешел к следующему элементу. Пожалуйста, не притворяйся, используя задержку. Вот мой упрощенный код.

$(document).ready(function() {
    $.ajaxSetup({cache:false});
    $('#friendslist li').each(function(index) {
        var post_id = $(this).attr("id")
        $(this).find(".status div").html("<img src='http://www.url.com/image.jpg'/>");
        $(this).find("#replace").load("http://www.url.com/ajaxstuff",{id:post_id});
    })
});

Заранее спасибо за помощь!

Answer 1

Настройка очереди, в которую вы помещаете каждую из ваших функций. Вызов первой функции в очереди. Когда он завершает выполнение, он должен вытолкнуть следующую функцию из очереди и выполнить ее, и так далее. Не используйте синхронные запросы Ajax, так как это заблокирует браузер.

Упрощенный пример:

var queue = [];
queue.push(function(){
    $("#replace").load("somefile.html", function(){
        // Still need to check that another element to pop exists
        (queue.pop())();
    });
});
queue.push(function(){
    $("#replace2").load("somefile2.html", function(){
        // Still need to check that another element to pop exists
        (queue.pop())();
    });
});
(queue.pop())();

Обратите внимание, что это может быть дополнительно оптимизировано, и вам все равно нужно проверить, существует ли другой, который вы можете открыть и выполнить. Но это начало.

Answer 2

Вы можете установить параметр async на false, если хотите, чтобы цикл ожидал его, что сделает браузер недоступным для использования во время его выполнения.

как это

$.ajaxSetup({cache:false, async:false});

Answer 3

Вместо выполнения цикла $ .each, вы можете просто рекурсивно вызвать функцию снова в обработчике load().

function LoadFriends(i) {
    $("#friendslist li:eq(" + i + ")").load('/echo/html/', {
        html: 'Hello!', delay: 1
    }, function() {
        LoadFriends(i+1);
    });
}
LoadFriends(0);

Пример кода на jsfiddle .

Поместив это с вашим примером кода:

$(document).ready(function() {
    $.ajaxSetup({cache:false});

    function LoadFriends(i) {
        var $li = $("#friendslist li:eq(" + i + ")");

        var post_id = $li.attr("id")
        $li.find(".status div").html("<img src='http://www.url.com/image.jpg'/>");
        $li.find("#replace").load("http://www.url.com/ajaxstuff",{id:post_id}, , 
            function(){
              LoadFriends(i+1);
        });
    }
    LoadFriends(0);
});

Answer 4

Вам нужно будет реструктурировать свой код. Вы должны выполнить следующий «запрос» в обратном вызове предыдущего запроса. Поскольку .load будет работать асинхронно.