等到三个ajax调用解析为触发函数（延迟？）

I need to wait until three ajax calls have completed until another function should begin. I've tried using the jquery deferred promise https://api.jquery.com/deferred.promise/ but my jobs are returned before the deferred data is loaded. I need to force these three ajax calls to complete before firing the function. I'm not tied down to using deferred, that just seemed like the logical way to go.

我需要等到三个ajax调用完成，直到另一个函数开始。我已尝试使用jquery延迟承诺https://api.jquery.com/deferred.promise/但我的作业在加载延迟数据之前返回。我需要在激活函数之前强制执行这三个ajax调用。我没有被限制使用延迟，这似乎是合乎逻辑的方式。

I am using datatables and need the ajax calls to complete before data is loaded into them.

我正在使用数据表，需要在将数据加载到数据表之前完成ajax调用。

"ajax":{
        "url": API_ROOT + "jobs?available=true&max_results=500",
        "dataSrc": function(data){
            function all_loaded(){
                var dfd = $.Deferred();
                var mats_loaded, fins_loaded, pros_loaded;
                setTimeout(function(){
                $.ajax({
                    url: API_ROOT + "finishes?max_results=500",
                    dataType: 'json',
                    error: function(){
                        console.log("Error getting finishes");
                    },
                    success: function(data){ 
                        finishes = data._items;
                        fins_loaded = true;
                        check_all_loaded();
                    }
                });
                },2000);

                $.ajax({
                    url: API_ROOT + "processes?max_results=500",
                    dataType: 'json',
                    error: function(){
                        console.error("Error getting processes");
                    },
                    success: function(data){ 
                        processes = data._items;
                        pros_loaded = true;
                        check_all_loaded();
                    }
                });

                $.ajax({
                    url: API_ROOT + "materials?max_results=500",
                    dataType: 'json',
                    error: function(){
                        console.log("Error getting materials");
                    },
                    success: function(data){ 
                        materials = data._items;
                        mats_loaded = true;
                        check_all_loaded();
                    }
                });

                check_all_loaded = function(){
                    if (mats_loaded && fins_loaded && pros_loaded){
                        dfd.resolve("Loaded");
                    }
                }

                return dfd.promise();
            }

            $.when( all_loaded()).then(function(){
                var jobs = data._items;
                //a bunch of other stuff
                return jobs;
            });
        }
    }

The .when eventually fires, that's not the problem, the problem is that the .when is returning nothing for the data because the Ajax calls haven't been completed. Essentially, we need the .when to stop executing all js until the promise has been resolved.

.when最终会触发，这不是问题，问题是.when没有为数据返回任何内容，因为Ajax调用尚未完成。基本上，我们需要.when停止执行所有js，直到promise被解决。

Sorry for the long code, I just want to be complete and wanted to note that I have three separate Ajax calls. Thanks for your thoughts.

对于长代码很抱歉，我只想完成并想要注意我有三个单独的Ajax调用。谢谢你的想法。

2 个解决方案

#1

You need to initialize your datatable using JavaScript-sourced data (see data option) AFTER your Ajax calls are complete instead of using Ajax-sourced data directly with ajax option.

您需要使用JavaScript源数据初始化数据表（请参阅数据选项）在Ajax调用完成后，而不是直接使用Ajax源数据和ajax选项。

For example:

例如：

var ajax1 = $.ajax( /*...*/ );
var ajax2 = $.ajax( /*...*/ );
var ajax3 = $.ajax( /*...*/ );

// When all Ajax requests were successful
$.when(ajax1, ajax2, ajax3).done(function(a1, a2, a3){
   // a1, a2 and a3 are arguments resolved 
   // for the ajax1, ajax2 and ajax3 Ajax requests, respectively.

   // Each argument is an array with the following structure:
   // [ data, statusText, jqXHR ]

   // Merge data from three Ajax calls
   var data = a1[0]._items.concat(a2[0]._items, a3[0]._items);

   // IMPORTANT:
   // Initialize data table once all Ajax requests are successful
   $('#example').DataTable({ 
     data: data,
     // ... other options ...
   });
});

#2

You can use $.when and pass all the ajax calls that you need to wait.

你可以使用$ .when并传递你需要等待的所有ajax调用。

Example:

例：

var ajax1 = $.ajax(..)
var ajax2 = $.ajax(..)
var ajax3 = $.ajax(..)
$.when(ajax1, ajax2, ajax3).then(function(){
 oncomplete code here...
});

#1