如何同步两个嵌套的 jquery foreach 循环？答案

【问题标题】：How to synchronize two nested jquery foreach loop?如何同步两个嵌套的 jquery foreach 循环？
【发布时间】：2015-12-14 20:17:32
【问题描述】：

在内部循环的最后一次迭代中，我有两个嵌套的每个循环，我想调用一个包含 ajax 调用的 jquery 函数。只有在从这个 ajax 调用中获得结果之后，每个外部的下一次迭代才会发生。有什么办法可以同步这些循环。

$.ajax({
        type: "POST",
        contentType: 'application/json;charset=utf-8',
        dataType:'json',
        url: 'getCall1',
        data: JSON.stringify(send_data),
        success: function(json)
        {
          $.each(json,function(i,item){
            $.ajax({
                    type: "POST",
                    contentType: 'application/json;charset=utf-8',
                    dataType:'json',
                    url: 'getcall2',
                    data: JSON.stringify(send_data),
                    success: function(json)
                    {
                      $.each(json,function(i,item){
                       //For last iteration of this loop i want to call a function contain another ajax call. After completion of this call i want to continue with next iteration of outer loop
                        callFun();
                      });
                    }
             });
      });
   }

});

function callFun(){
  $.ajax({
        type: "POST",
        contentType: 'application/json;charset=utf-8',
        dataType:'json',
        url: 'getcall3',
        data: JSON.stringify(send_data),
        success: function(json)
        {

        }
  });
}

【问题讨论】：

您应该了解它将如何影响您的表现。几个嵌套的 AJAX 调用需要很长时间才能执行。
我能够尽快得到结果，但问题是两个循环没有等待函数调用'callFun'
我认为人们错过了你只在代码 cmets 中指定的隐含问题：For last iteration of this loop i want to call a function contain another ajax call. After completion of this call i want to continue with next iteration of outer loop

标签： jquery ajax

【解决方案1】：

您可以使用回调函数来处理它：

$.ajax({
    type: "POST",
    contentType: "application/json;charset=utf-8",
    dataType: "json",
    url: "getCall1",
    data: JSON.stringify(send_data),
    success: function(json)
    {
        var keys = Object.keys(json);
        if(keys.length)
        {
            func1(0, keys, json);
        }
    }

});

function func1(index, keys, json1)
{
    //you can get values from json1 using:
    var val = json1[keys[index]];
    //and use val
    $.ajax({
        type: "POST",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        url: "getcall2",
        data: JSON.stringify(send_data),
        success: function(json2)
        {
            var keys2 = Object.keys(json2),
                i;
            if(keys2.length)
            {
                for(i = 0; i < keys2.length; i++)
                {
                    //do as you wish
                    if(i === (keys2.length - 1))
                    {
                        callFun(
                            function callBack()
                            {
                                if(index < keys.length)
                                {
                                    func1(++index, keys, json1);
                                }
                            }
                        );
                    }
                }
            }
        }
    });
}

function callFun(callbackFunc)
{
    $.ajax({
        type: "POST",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        url: "getcall3",
        data: JSON.stringify(send_data),
        success: function(json)
        {
            callbackFunc();
        }
    });
}

祝你好运

【讨论】：

【解决方案2】：

您可以使用 jQuery 承诺或延迟对象，这将最适合您的问题。确保所有这些 Ajax 都是异步的。请尝试这样：

     var promiseOne, promiseTwo,promiseThree;
        // Promises
        promiseOne = $.ajax({ url: 'getCall1' });

        promiseTwo = $.ajax({ url: 'getcall2' });

        promiseThree=$.ajax({ url: 'getcall3' });

     $.when(promiseOne).done(function(jsonValue1){
       $.each(jsonValue1,function(value1){
          $.when(promiseTwo).done(function(jsonValue2){
            $.each(jsonValue2,function(value2){
              $.when(promiseThree).done(function(jsonValue3){
               $.each(jsonValue3,function(value3){

                //write the code here

           })
            })
          })
        })
      })

 });

【讨论】：

我想通过 getcall2 和 getcall3 传递两个 json 值，我应该在哪里指定。
你不需要所有这些嵌套，因为docs 指定，when 可以接受多个承诺并在 all 完成后解析。您也错过了问题的重点：For last iteration of this loop i want to call a function contain another ajax call. After completion of this call i want to continue with next iteration of outer loop
在 ajax 异步中。调用，你必须等待完成调用并获取数据并使用它，否则你会得到'未定义'。