Web App Development

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 () {
def.notify(Math.round(count / 4 * 100) + "%")
if (count === 4) {
}, 500);
return def.promise();

var promise = getExamplePromise();
promise.progress(function (progress) {
console.log("Progress report: " + progress);
promise.then(function () {
This will be printed in the console:
Progress report: 25%
Progress report: 50%
Progress report: 75%
Progress report: 100%
You can use notifyWith if you want to set the execution context in the progress handler.


Follow me on Twitter
I'm building a website monitoring tool called DebugBear. Want to give it a try?
➔ Start moniting your website