javascript - 通过 JavaScript 循环加载的项目未按正确顺序显示

Question

我有以下代码，应该在页面加载时显示 3 个产品:

for(i=0;i<3;i++) {
    document.forms['search_info'].elements['page'].value = i+',1,'+(i+1);
    var jsonData = $('#search_info').serializeArray();
    var page = document.forms['search_info'].elements['page'].value.split(',');
    var limitData = {'name':'limit','value': page[0]+','+page[1]};
    jsonData.push(viewData);
    jsonData.push(limitData);
    $.ajax({
        type: "GET",
        dataType: "json",
        url: 'index.php',
        cache: false,
        data: jsonData,

        success: function(data) {
            var text = data.output;
            var el = $('#scroller');
            el.append('<li>' + text + '</li>').hide().fadeIn(450);
        }
    });
}

它确实完成了工作，唯一的问题是产品的顺序；每次我重新加载页面时，项目都会以随机顺序出现。

知道为什么会发生这种情况吗？我该如何解决这个问题？

Answer 1

这些调用是异步发生的，并且实际上是同时开始的。每次完成的顺序可能不同。

通过将 async: false 添加到您的代码中，它应该可以工作:

       $.ajax({
            type: "GET",
            dataType: "json",
            url: 'index.php',
            cache: false,
            data: jsonData,
            async: false

另请参阅此处的相关文档:http://api.jquery.com/jQuery.ajax/