Wait until three ajax calls are allowed to trigger the function (defer?)

Question

I need to wait until the three ajax calls end before another function starts. I tried using jquery deferred promise https://api.jquery.com/deferred.promise/ , but my jobs return before loading deferred data. I need to get these three ajax calls to complete before I run the function. I am not attached to using deferred, it just seemed like a logical way.

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

"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;
            });
        }
    }

, , , .when , Ajax . , .when js , .

, , Ajax. .

Answer 1

, , JavaScript (. data) Ajax , Ajax- ajax.

:

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 ...
   });
});

Answer 2

$.when ajax, .

:

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