Multiple Ajax run syncronus in .each loop

Question

I want to run AJAX requests for multiple time to get data from different folders and at the last one more AJAX will fire to make a zip of the data. every thing is done but the biggest issue is some files runs after the file file run so they can't be include in zip file. Please suggest what to do?

$('#View_Rep').click(function() {
    $(this).hide();
    $('#restable').hide();
    document.adminweeklycorrection.action = '';
    $('#centerSec').css('display', 'none');
    $('#processingDiv').css('display', 'block');
    $('#processingDiv').html("<img height='150' src='img/loading-circle.gif'><h4>Processing data</h4>");
    var carr = $('#wkarr').val();
    carr = carr.split(",");
    $.each(carr, function(n) {
        if ($('#weekarray').val()) {
            $.ajax({
                url: "rxml.php",
                method: "POST",
                async: "false",
                data: $("#adminweeklycorrection").serialize()
            }).done(function(msg) {
                if (n == parseFloat(carr.length) - parseFloat(1)) {
                    $('#processingDiv').html("<img height='150' src='img/loading-circle.gif'><h4>Preparing reports</h4>");
                    $.ajax({
                        url: "cmbrxml.php",
                        method: "POST",
                        async: "false",
                        data: $("#adminweeklycorrection").serialize()
                    }).done(function(msg) {
                        $('#processingDiv').html("<h3>Report generated successfully</h3><h4><a href='" + msg + "'>Download Report</a></h4><h5><a href='adminchartcorrection.php'>Back</a></h5>");
                        if ($('#logtype').val() == 'Ship') {
                            $('#processingDiv').append("<form name='send_mail' id='send_mail' method='post' action='adminchartcorrection.php'><input type='hidden' name='chartnumber' id='chartnumber' value='" + $('#chartnumber').val() + "'><input type='submit' name='send_mail' value='Send Mail' id='send_mail'></form>");
                        }
                        //redir(msg);
                    });
                }
            });
            var curr = $('#weekarray').val();
            curr = curr.split(",");
            var sftd = curr.shift();
            //$('#weekarray').val('');
            $('#weekarray').val(curr);
        }
    });
});

Answer 1

My recommendation is to make Async requests (they will fire at same time and will not have to wait until previous one finished).

And use promises. (I'm not familiar with jquery promises so will give abstract example):

var promises = [];
$.each(arr....
    // as I said I'm not sure if $.ajax returns promise in jquery (I use angular). This is just abstract example
    var promise = $.ajax(.... async: TRUE ....)
    promises.push(promise);
});

// again, this is just abstract example, but promises library that you'll use will have a way to register a callback when array of promises are finished
$q.all(promises).then(function(responses) {
    // now ALL requests are finished and you have ALL responses in "responses array
});

Answer 2

Checking if loop index is the last one does not mean that related ajax request was the last one executed. Instead of that, make a variable with requests count and decrease it on every requests' done method.

Try this:

var ajaxRequestsLeft = carr.length;        //added
$.each(carr, function(n) {
    if ($('#weekarray').val()) {
        $.ajax({
            url: "rxml.php",
            method: "POST",
            async: "false",
            data: $("#adminweeklycorrection").serialize()
        }).done(function(msg) {
            ajaxRequestsLeft--;            //added
            if(ajaxRequestsLeft == 0) {    //modified
                $('#processingDiv').html("<img height='150' src='img/loading-circle.gif'><h4>Preparing reports</h4>");
                $.ajax({
                    url: "cmbrxml.php",
                    method: "POST",
                    async: "false",
                    data: $("#adminweeklycorrection").serialize()
                }).done(function(msg) {
                    $('#processingDiv').html("<h3>Report generated successfully</h3><h4><a href='" + msg + "'>Download Report</a></h4><h5><a href='adminchartcorrection.php'>Back</a></h5>");
                    if ($('#logtype').val() == 'Ship') {
                        $('#processingDiv').append("<form name='send_mail' id='send_mail' method='post' action='adminchartcorrection.php'><input type='hidden' name='chartnumber' id='chartnumber' value='" + $('#chartnumber').val() + "'><input type='submit' name='send_mail' value='Send Mail' id='send_mail'></form>");
                    }
                    //redir(msg);
                });
            }
        });
var curr = $('#weekarray').val();
curr = curr.split(",");
var sftd = curr.shift();
        //$('#weekarray').val('');
        $('#weekarray').val(curr);
    }
});