jQuery - jQuery Deferred / Promises

What are Deferred / Promises in jQuery?

When you make an asynchronous operation (like an AJAX request or animation), the result isn’t available immediately.

• Deferred objects let you manage these results.

• They return a promise, which allows you to attach callbacks for success, failure, or completion.

This makes your code more organized and readable compared to nesting multiple callbacks.

Key Methods

1. .done()

• Runs when the operation succeeds.

$.ajax("data.json")
  .done(function(data) {
    console.log("Success:", data);
  });

2. .fail()

• Runs when the operation fails (like server error, wrong URL).

$.ajax("wrong.json")
  .fail(function(error) {
    console.log("Error occurred:", error.statusText);
  });

3. .always()

• Runs no matter what (success or failure).

$.ajax("data.json")
  .always(function() {
    console.log("AJAX call finished.");
  });

Chaining Example

$.ajax("data.json")
  .done(function(data) {
    console.log("Data loaded:", data);
  })
  .fail(function() {
    console.log("Request failed!");
  })
  .always(function() {
    console.log("Request completed (success or fail).");
  });

Custom Deferred Example

You can also create your own deferred objects:

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

  setTimeout(function() {
    var success = true;
    if(success) {
      deferred.resolve("Task completed!");
    } else {
      deferred.reject("Task failed!");
    }
  }, 2000);

  return deferred.promise();
}

asyncTask()
  .done(function(msg) { console.log(msg); })
  .fail(function(err) { console.log(err); })
  .always(function() { console.log("Task finished."); });

Simplified Explanation

• .done() → runs when things go right

• .fail() → runs when things go wrong

• .always() → runs at the end, regardless of success or failure