JQuery Deferred. Using $.when and .progress()

Jon Wells picture Jon Wells · Aug 22, 2012 · Viewed 9k times · Source

I am writing a parser littered with Async Tasks. I use JQuery promises to control and order the async tasks. This is a psuedo code version of the constructor function:

   /**
     * @constructor
     */
    function Parser(json)
    {   
        return $.when(
            this.delete().then(this.insert(json)),
            this.doSomething(),
            this.doSomethingElse().then(this.update(json))
        ) 
    };

and this is what an example function looks like:

Parser.prototype.doSomething = function()
{   
    var dfd = $.Deferred();

    exampleTask(dfd.reject, dfd.resolve);

    return dfd.promise();
};

From the JQuery docs:

In the case where multiple Deferred objects are passed to jQuery.when, the method returns the Promise from a new "master" Deferred object that tracks the aggregate state of all the Deferreds it has been passed

How can I use .progress() to notify anybody that cares about the overall progress of the Parser? e.g.

var parser = new Parser(json);
parser.progress(function(prog){console.log(prog});

Heres a fiddle with what I'm trying to do: http://jsfiddle.net/ashanova/RjULA/2/

Answer

João Silva picture João Silva · Aug 22, 2012

Use deferred.notify() to call the progressCallbacks. For example:

function doSomething() {   
    var dfd = $.Deferred();

    var count = 0;
    var intervalId = setInterval(function() {
        dfd.notify(count++);
        count > 3 && clearInterval(intervalId);
    }, 500);

    return dfd.promise();
};

var promise = doSomething();

promise.progress(function(prog) {
  console.log(prog);
});​

DEMO.