javascript - 如何仅在成功进入下一个循环值时才在循环中运行 ajax 请求？

Question

我有一个非常基本的场景：运行 3 个 Google 地图位置 URL 并在每次成功时显示结果

这是我到目前为止所拥有的：

 var  values = ["url1", "url2", "url3"];

  values.forEach(function(value, i) {

     var jsonReq = JSON.stringify({
        action: 101,
        supported: value 
    });

    ...

     $.ajax({
        type: "POST",
        url: "data.ajax.php",
        dataType:"json",
        data:{
            data:jsonReq
        },
        success:function(data){
           // parse results
           ....

        }
    }); 

  });

问题是我在没有等待成功的情况下循环运行所有 3 个 URL 。

我只想在获得前一个请求的响应（回调）时发送下一个请求。

有什么建议么？

谢谢，

Answer 1

尝试递归......像这样

var currentR = 0;
    var  values = ["url1", "url2", "url3"];
    function sendReqests()
    {
       if(!values[currentR])
       return false;
       var jsonReq = JSON.stringify({
            action: 101,
            supported: values[currentR]
        });
       $.ajax({
            type: "POST",
            url: "data.ajax.php",
            dataType:"json",
            data:{
                data:jsonReq
            },
            success:function(data){
             currentR++;  
              if(values[currentR]){
              sendReqests();
              }
            }
        }); 

    }


    // call the recursive function 

    sendReqests();

Answer 2

在ajax请求中调用下一个请求的完整功能

var  values = ["url1", "url2", "url3"];

  values.forEach(function(value, i) {

     var jsonReq = JSON.stringify({
        action: 101,
        supported: value 
    });

    ...

     $.ajax({
        type: "POST",
        url: "data.ajax.php",
        dataType:"json",
        data:{
            data:jsonReq
        },
        success:function(data){
           // parse results
           ....

        },
      complete: function(){

      }
   }); 

  })

Answer 3

您可以使用setTimeout而不是使用循环

var  values = ["url1", "url2", "url3"];
var index = 0;

function repeatedCall(value, i) {

     var jsonReq = JSON.stringify({
                        action: 101,
                        supported: values[index]
                    });
     index++;
     if(index == 4)
         clearTimeout(loop );
     else
         setTimeout(repeatedCall, 0);
}
var loop setTimeout(repeatedCall, 0);

Answer 4

相反foreach，你可以使用every，因为突破every比更容易foreach

var  values = ["url1", "url2", "url3"];
function ajaxCall(value) {
    var jsonReq = JSON.stringify({
        action: 101,
        supported: value 
    });

    $.ajax({
        type: "POST",
        url: "data.ajax.php",
        dataType:"json",
        async: false,
        data:{
            data:jsonReq
        },
        success:function(data){
           // parse results
           // if success
           //       return true
           // else
           //       return false

        }
    });
    return true;
}
values.every(ajaxCall);