Looping Through Array With Callback

I am trying to run through a array send to a php file and on a callback send the next value after the php has completed its download. Here what i have so far. my array come through

Solution 1:

May be this structure can help you. In this variant you go next URL only after successful completion of the previous Ajax call.

var arr = ['url0','url1','url2','url3'];
    var index = 0;

    functionRun(){
         DoAjax(arr[index]);
    }
    functionNext(){
        if(arr.count = index-1)
        {
             index =0;
             return;  
        }else{
           DoAjax(arr[index ]);
        }
    }    

    functionDoAjax(url){

         $.ajax({
          type: "POST",
          url: url,
          data: send,
          beforeSend: function() {

          },
          success: function(response) {
             index ++;
             Next();
             // Addition logic if needed
          },
          error: function (response) {

          }
     });
    }

Run()

Solution 2:

Now that I have a bit more time, I thought it would be good to show an alternative which takes advantage of the fact that jquery ajax is now implemented as a deferred. Meaning you can use pipe chaining to do all the work for you. I've also eliminated the callbacks by taking advantage of the deferred behavior.

This should give you the idea.

// Use jquery deferred pipe chaining to force // async functions to run sequentiallyvar dfd = $.Deferred(),
    dfdNext = dfd,
    x,
    values = [],

    // The important thing to understand here is that // you are returning the value of $.ajax to the caller.// The caller will then get the promise from the deferred.
    ajaxRequest = function (urlSend) {

        var send = {
            url: urlSend
        }

        return  $.ajax({
            type: "POST",
            url: "<?php echo base_url(); ?>index.php/upload",
            data: send,
        });
    };


// Starts things running.  You should be able to put this anywhere // in the script, including at the end and the code will work the same.

dfd.resolve();


// Deferred pipe chaining.  This is the main part of the logic.// What you want to note here is that a new ajax call will // not start until the previous// ajax call is completely finished.// Also note that we've moved the code that would// normally be in the callback.// Finally notice how we are chaining the pipes by// replacing dfdNext with the return value from the// current pipe.for (x = 1; x <= 4; x++) {

    values.push(x);

    dfdNext = dfdNext.pipe(function () {
        var value = values.shift();
        returnrequestAjax(value).
            done(function(response) {
                // Code here that you would have // put in your callback.console.log(response);
            }).
            fail(function(response) {
                console.log(response);
            };

    });

}

Working example you can play with on jsFiddle.