Deferred Async Tasks with jQuery

Question

I'm new to deferred classes in JavaScript and would like to implement a function which will loop through forms and submit them one by one.

Looks like Deferred classes are the way to accomplish this.

I tried following this answer, but for some reason my implementation starts, waits 3 seconds and completes. I want it to show a different form name every 3 seconds until it's done with all the forms then complete.

What am I doing wrong? JSFIDDLE

function syncAll() {
        
  var promises = [];
  var forms = [
    {'name':'form 1'},
    {'name':'form 2'},
    {'name':'form 3'}, 
    {'name':'form 4'}];

  $.each(forms, function (index, value) {
    var def = new $.Deferred();
    setTimeout(function () {
      $("#output").html("Syncing: " + value.name);
      def.resolve({ 'message': 'finito!' });
    }, 3000);
    promises.push(def);

  });

  return $.when.apply(undefined, promises).promise();
}
    
    
    $.when(syncAll()).done(function(response){
        $("#output").html(response.message);
    });
    /*
    syncAll().done(function (response) {
      $("#output").html(response.message);
    }));
    */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Start</div>

`$.when` applies promises *in parallel* and awaits them all finishing. All your forms are submitting at the same time. You want to chain them *in sequence* with `.then()` — iCollect.it Ltd, Dec 08 '16 at 14:24
Having your own delay() function, that returns a timer promise, is also useful to keep your code clean. — iCollect.it Ltd, Dec 08 '16 at 14:25
@GoneCoding - So how would I chain the sequence if it's a loop calling the same function? say `submitForm`. — capdragon, Dec 08 '16 at 14:27

score 5 · Accepted Answer · edited Sep 13 '17 at 14:28

JSFiddle: https://jsfiddle.net/TrueBlueAussie/v6cgak1u/2/

This uses a promise = promise.then(functionReturningNextPromise) pattern:

function syncAll() {
    var promise = $.when();  // Start with a resolved promise.
    var forms = [
      {'name':'form 1'},
      {'name':'form 2'},
      {'name':'form 3'}, 
      {'name':'form 4'}];

    $.each(forms, function (index, value) {
        promise = promise.then(function(){
            var def = $.Deferred();
            setTimeout(function () {
                $("#output").html("Syncing: " + value.name);
                def.resolve({ 'message': 'finito!' });
            }, 3000);
            return def.promise();
        });
    });
    return promise;
}


$.when(syncAll()).done(function(response){
    $("#output").html(response.message);
});

This could be improved a bit by replacing the setTimeout and having a timed promise method instead that also chains together (still implemented using setTimeout).

Note that new is not required on $.Deferred()

EDIT :

Features of javascript and jQuery can be exploited to make the code slightly more concise :

function syncAll() {
    var forms = [
        {'name':'form 1'},
        {'name':'form 2'},
        {'name':'form 3'}, 
        {'name':'form 4'}
    ];
    return forms.reduce(function(promise, value) {
        return promise.then(function() {
            return $("#output").delay(1000).html("Syncing: " + value.name).promise();
        });
    }, $.when()).then(function() {
        return {'message': 'finito!'};
    });
}

syncAll().then(function(response) {
    $("#output").html(response.message);
});

This is essentially the same paradigm as above but exploits :

'array.reduce()' to build the promise chain from the forms array.
jQuery's .delay() instead of setTimeout(), to implement delay.

Excellent. Thank you, I'll take some time to absorb this, then come back and mark your answer as correct. Genius. — capdragon, Dec 08 '16 at 14:31
@capdragon, you can achieve the same end by exploiting features of javascript and jQuery **[like this](https://jsfiddle.net/u75guwv3/)**. — Roamer-1888, Dec 08 '16 at 23:09
@Roamer-1888: Suggest you post that as an answer with detailed explanation. I did not shorten my own example any further as it would become too complicated to explain. — iCollect.it Ltd, Dec 09 '16 at 09:30
@GoneCoding, I don't want to compete with your answer. If I find time I'll add to the bottom of yours if that's OK? — Roamer-1888, Dec 09 '16 at 09:55

Deferred Async Tasks with jQuery

1 Answers1