Jquery Deferred in each loop with ajax callback

Question

With reference to https://stackoverflow.com/a/13951699/929894, I tried using deferred object in nested ajax loop. However the output is not returning as expected. I have updated my code in fiddle for reference. - https://jsfiddle.net/fewtalks/nvbp26sx/1/.

CODE:

  function main() {
    var def = $.Deferred();
    var requests = [];
    for (var i = 0; i < 2; i++) {
        requests.push(test(i));
    }
    $.when.apply($, requests).then(function() {
        def.resolve();
    });

    return def.promise();
}

function test(x){
    var def = $.Deferred();
  test1(x).done(function(){
                setTimeout(function(){ console.log('processed test item', x); def.resolve();}, 1000);
          });
  return def.promise();
}

function test1(items){
    var _d = $.Deferred();
  setTimeout(function(){ 
    console.log('processed test1 item', items); 
    _d.resolve();
  });
  return _d.promise();
}

main().done(function(){ console.log('completed')});

Code contains a main function which executes loop. On each loop, a sub function(test) is executed. Inside the sub function(test) another function(test1) is called. Both sub functions test and test1 has AJAX call declaration. For AJAX call I have used setTimeout property. I'm expecting an output like

processed test1 item0
processed test item0
processed test1 item1
processed test item0
completed

For each loop, I want the function to be executed as Test1() then test(); However I'm getting the result as

processed test1 item 0
 processed test1 item 1
processed test item 0
processed test item 1
completed

After executing the test1 completely test function is executed. Why the function is not executing sequentially for each loop.

UPdated code for another test run

function main(items) {
    var items = items;
    return items.reduce(function (p, index) {
        return p.then(function () {
            return test(index);
        });
    }, $.Deferred().resolve());
}

function test(x) {
    var def = $.Deferred();
    test1(x).done(function () {
        setTimeout(function () {
            log('processed test item', x);
            def.resolve();
        }, 1000);
    });
    return def.promise();
}

function test1(items) {
    var _d = $.Deferred();
    setTimeout(function () {
        log('processed test1 item', items);
        _d.resolve();
    });
    return _d.promise();
}

var items = [0, 1];
function test2(x) {
    var _d = $.Deferred();
    setTimeout(function () {
        log('processed test2 item',x);
        _d.resolve();
    });
    return _d.promise();
}

main([1,2]).done(function(data){test2(items);}).then(function () {
    log('completed')
});

<script src="https://dl.dropboxusercontent.com/u/7909102/log.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

why 'completed' is logged before processing test2 function?

Answer 1

Your result is as expected.

Your for loop runs synchronously to completion and runs test() twice.

test() then immediately calls test1() so the first thing you see is that test1() gets to run twice. Then, after each test1() completes its promise, it sets the timer for your test() log message. So naturally, the two log messages from test() comes after the two log messages from test1().

Remember that $.when() runs things in parallel so all the promises you pass it are in flight at the same time.

If you want to serialize your calls to test(i) so the next one doesn't happen until after the first one, then you need to do things differently.

Also, you are using an anti-pattern in main() by creating a deferred where you don't need to create one. You can just return $.when.apply(...). You don't need to wrap it in another deferred.

---

To serialize your calls to test(i) to get the type of output you indicate you wanted, you can do this:

function main() {
    var items = [0, 1];
    return items.reduce(function(p, index) {
        return p.then(function() {
            return test(index);
        });
    }, $.Deferred().resolve());
}

Working demo that generates your desired output: https://jsfiddle.net/jfriend00/hfjvjdcL/

This .reduce() design pattern is frequently used to serially iterate through an array, calling some async operation and waiting for it to complete before calling the next async operation on the next item in the array. It is a natural to use .reduce() because we're carrying one value through to the next iteration (a promise) that we chain the next iteration to. It also returns a promise too so you can know when the whole thing is done.