jquery - for 循环中的 AJAX 请求返回乱序结果

Question

我正在尝试按照请求的顺序将 10 张图像附加到我的 #container 中，但由于我不明白的原因，它们被乱序返回。

我目前正在通过 for 循环获取 URL，并将它们传递到 AJAX 请求中，如下所示:

for (i = 0; i < $links.length; i++) {
    link = $links.eq(i).attr('href');

    // Appends anchor into #container
    $('#container').append('<a href="' + link + '" class="tile"><p>' + $links.eq(i).text() + '</p></a>');

    $.ajax({
        type: 'GET',
        url: link
    }).done(function (data) {
        var $data = $(data);
        $('#container').append($data.find('img').eq(0));
    });
};

任何关于如何解决或更好地解决这个问题的见解都会很棒!谢谢!

Answer 1

这是预期的行为，因为请求是异步的。它们可能会按照您需要的顺序触发，但响应时间完全取决于服务器以及处理每个请求所需的时间。

例如，假设您提出 3 个请求。 #1 需要 150 毫秒才能完成，#2 需要 200 毫秒，#3 需要 75 毫秒。然后，您的 done() 处理程序将按照 3、1、2 的顺序执行请求。

如果您依赖于按特定顺序处理响应，则需要修改代码以在单个请求中发送所有数据，以便可以根据需要设置响应的格式。

使用async: false可能会产生您期望的行为，但使用它是非常糟糕的做法，上面的解决方案会更好。