SyntaxStudy
Sign Up
jQuery Advanced 11 min read

Deferred and Promises

jQuery Deferred and Promises

jQuery has its own promise system via $.Deferred().

Basic Deferred

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

    setTimeout(function() {
        dfd.resolve("Task complete");
        // or dfd.reject("Error");
    }, 1000);

    return dfd.promise();
}

asyncTask()
    .done(function(result) { console.log(result); })
    .fail(function(err) { console.error(err); })
    .always(function() { console.log("Always runs"); });

$.when() — Multiple Promises

$.when(
    $.get("/api/users"),
    $.get("/api/products")
).done(function(usersRes, productsRes) {
    var users = usersRes[0];
    var products = productsRes[0];
    console.log(users, products);
}).fail(function() {
    console.error("One or more requests failed");
});
Pro Tip

For new projects, prefer native ES6 Promises and fetch() over jQuery's Deferred system.