← Back to jQuery Course | Chapter 12: Deferred & Promises | Lesson 3 of 5

Creating and Resolving Deferred

Use $.Deferred to create a Deferred object. It starts in the pending state.

In this page:

  1. Create a Deferred
  2. Resolve a Deferred
  3. Reject a Deferred
  4. Resolve After a Delay
  5. Return a Promise
Syntax
javascript 
var deferred = $.Deferred();
deferred.resolve(value);
deferred.reject(reason);
deferred.promise();

Create a Deferred

$.Deferred() constructs a new Deferred object representing a task that hasn't resolved or rejected yet. You typically create one at the start of a function that wraps some asynchronous work, like a timer or a manual request, so you can control exactly when it settles.

Example: Create a Deferred

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      const dfd = $.Deferred();
      $("#output").text("Created, state: " + dfd.state());
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Resolve a Deferred

Call resolve() when the asynchronous operation completes successfully, and any done() callbacks already attached — or attached later — will receive whatever values you pass to resolve(). This is the signal that tells all the listening code the task finished the way it was supposed to.

Example: Resolve a Deferred

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      const dfd = $.Deferred();
      dfd.done(function(value) { $("#output").text(String(value)); });
      dfd.resolve("Success value");
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Reject a Deferred

Call reject() when the asynchronous operation fails, and any fail() callbacks receive the values passed to reject(), typically an error message or object describing what went wrong. This lets calling code distinguish a genuine failure from a successful result without needing separate return paths.

Example: Reject a Deferred

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      const dfd = $.Deferred();
      dfd.fail(function(error) { $("#output").text(String(error)); });
      dfd.reject("Something went wrong");
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Resolve After a Delay

A Deferred can represent any delayed operation, not just an AJAX call — a setTimeout, a user interaction, or a long-running calculation can all be wrapped in one and resolved once the actual work finishes. This makes Deferred a general-purpose tool for turning any async pattern into something with a consistent done/fail interface.

Example: Resolve After a Delay

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      function delayedTask() {
        const dfd = $.Deferred();
        setTimeout(function() { dfd.resolve("Finished"); }, 200);
        return dfd;
      }
      delayedTask().done(function(msg) { $("#output").text(String(msg)); });
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Return a Promise

Return d.promise() — not the Deferred itself — when outside code should be able to observe the task's outcome but shouldn't be able to resolve or reject it directly. This protects the internal resolve/reject logic so only the code that created the Deferred controls when it settles.

Example: Return a Promise

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      function loadData() {
        const dfd = $.Deferred();
        setTimeout(function() { dfd.resolve("data"); }, 100);
        return dfd.promise();
      }
      const result = loadData();
      result.done(function(data) { $("#output").text(JSON.stringify(data)); });
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

Deferred States · Introduction to Deferred Objects · Promise Pipeline Methods · Managing Multiple Async with when()

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Calling dfd.resolve() inside the wrong scope so it never runs, such as forgetting to call it inside the setTimeout callback.
  2. Passing multiple values to resolve(a, b) and then reading only the first in done(function (x) {...}), missing the second argument.
  3. Calling new $.Deferred without returning dfd.promise() from the function, so the caller has nothing to attach done() to.
🔒

Chapter Quiz — Complete all 5 topics to unlock

0/5 topics done

Complete these topics first:

← Previous Lesson Deferred States Next Lesson → Promise Pipeline Methods

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.