Ajax请求for循环和索引顺序

时间:2015-01-28 13:02:14

标签: javascript jquery ajax

我遇到有关在for循环中执行ajax请求的问题。我已经在网上搜索了它,并找到了一些我已经实现的解决方案,以避免同步运行请求。不幸的是,这些解决方案不提供如何确保成功块以正确顺序调用的信息。

这是我的代码:

for (var i = 0; i < array.length; i++) {
        (function(index) {
        var path = array[index].split(";")[1];
        var selectedRevision = array[index].split(";")[0];

        $.ajax({
          url: 'svntojson.jsp?revHistoryForPath=' + path,
          dataType:'text',
          success:function(data){
              console.log(index);
              var $li = $("<li/>").text(path).addClass("ui-corner-all")
                  .prepend("<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>")
                  .append('<button class="delete"></button>')
                  .append('<select class="revHistoryOptions" style="float:right;margin-right:5px;">' + data.trim() + '</select>');

              $("#list").append($li);
              $("#list").sortable('refresh');
              $('.revHistoryOptions').eq(index).children('option[value=' + selectedRevision + ']').attr('selected', 'selected');

          }
        });
    })(i);
    }

然而索引的顺序可能会改变,因为一个ajax请求更早成功。这不是问题,但我在成功块中附加了一些列表元素,我需要确切的顺序。

所以我的问题是如何确保我的ajax请求的成功块将按照从0到n-1的for循环索引的顺序被调用。

1 个答案:

答案 0 :(得分:3)

  

错误设计:如果您想要完整的同步行为并且不涉及迭代之间的任何用户交互,则可以避免   循环并使用单个ajax请求。

当您希望它完全同步时,您可以使用单个ajax:

$.ajax({
     url: 'svntojson.jsp?inputArray=' + array,
     dataType: 'json',//Note I changed this to json to receive the array on outputs
     success: function (data) {
         var resArray = data;
         for (var index = 0; index < resArray.length; index++) {
             var res = resArray[index];
             var $li = $("<li/>").text(res.path).addClass("ui-corner-all")
                 .prepend("<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>")
                 .append('<button class="delete"></button>')
                 .append('<select class="revHistoryOptions" style="float:right;margin-right:5px;">' + res.data + '</select>');

             $("#list").append($li);
             $("#list").sortable('refresh');
             $('.revHistoryOptions').eq(index).children('option[value=' + res.selectedRevision + ']').attr('selected', 'selected');
         }
     }
 });

在服务器上:

处理输入数组并为数组的每个元素生成输出。 (Psuedocode如下):

var resArray = new Array(inputArr.length);
    for (var i = 0; i < inputArr.length; i++) {
        var res = new res();
        res.path = inputArr[i].split(";")[1];
        res.selectedRevision = inputArr[i].split(";")[0];
        resArray.push(res);
    }
    return resArray;