通过JavaScript循环加载的项目显示顺序不正确

我有以下代码，当页面加载时应该显示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);
        }
    });
}

---

for（i=0；i调用是同步进行的，并且实际上是同时启动的。每次完成的顺序都可能不同

通过向代码中添加
async:false
，它应该可以工作：

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

另外，请参阅此处的相关文档：
这是因为AJAX调用是异步的。当您按顺序启动它们时，实际的完成顺序完全取决于其他因素：远程服务器的响应速度、每个HTTP连接的工作速度等

如果需要保证响应的显示顺序，则必须在响应中嵌入排序信息，说明“此数据块用于请求0”或“…请求2”等，然后使用额外的信息位确保将响应数据插入正确的位置。
可能重复：