jQuery deferred objects and reporting progress

Previous posts on deferred objects: with $.ajax and your own components.

jQuery deferred objects allow you to report progress by calling the notify function. You can add a handler to promise objects with the progress function. (Promise objects are subsets of deferred objects that are returned to the observing code.)

function getExamplePromise() {
    var def = $.Deferred();
    var count = 0;
    var interval = setInterval(function () {
        count++;
        def.notify(Math.round(count / 4 * 100) + "%")
        if (count === 4) {
            clearInterval(interval);
            def.resolve();
        }
    }, 500);
    return def.promise();
}

var promise = getExamplePromise();
promise.progress(function (progress) {
    console.log("Progress report: " + progress);
});
promise.then(function () {
    console.log("Done")
});

This will be printed in the console:

Progress report: 25%
Progress report: 50%
Progress report: 75%
Progress report: 100%
Done

You can use notifyWith if you want to set the execution context in the progress handler.

jQuery deferred objects and reporting progress

Comments