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

如果您希望循环等待它，可以将async选项设置为false，这将导致浏览器在执行时无法使用。

像这样

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

Answer 2

设置一个队列，放置每个功能。调用队列中的第一个函数。当它完成执行时，它应该从队列中弹出下一个函数并执行它，依此类推。不要使用同步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 3

您需要重新构建代码。您可以在先前查询的回调中运行下一个“查询”。因为.load将异步运行。

Answer 4

您可以简单地再次在load()处理程序中再次调用该函数，而不是执行$ .each循环。

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);
});

Jquery .each循环

4 个答案: