jQuery — Deferred and Data

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.data()

We can store data within matched elements with the data method.

For example, we can write the following HTML:

<span></span>

Then use data to store and get the data as follows:

$("body").data("foo", 52);
$("span").first().text($("body").data("foo"));

We save the data with key 'foo' and value 52 in the first line.

Then in the 2nd line, we get the data and put it in the span .

.dblclick()

The .dblclick() method binds an event handler to the dblclick event or trigger the event on an element.

For example, if we have the following HTML:

<div id="target">
  Double-click here
</div>
<div id="other">
  Trigger the handler
</div>

Then we can listen to double clicks on the div with ID target by writing:

$("#target").dblclick(function() {
  alert("Handler for .dblclick() called.");
});

We can also trigger a double click on the div with ID target when we click on the div with ID other by writing:

$("#target").dblclick(function() {
  alert("Handler for .dblclick() called.");
});$("#other").click(function() {
  $("#target").dblclick();
});

deferred.always()

deferred.always() adds a callback to be called when the deferred object is resolved or rejected.

For example, we can write:

$.get("foo.php").always(function() {
  alert("$.get completed");
});

to call the alert when we make a GET request for foo.php .

deferred.catch()

The deferred.catch method adds a callback that’s called when the deferred object is rejected.

For example, we can write:

$.get("foo.php")
  .then(function() {
    alert("$.get succeeded");
  })
  .catch(function() {
    alert("$.get failed!");
  });

or:

(async () => {
  try {
    const res = await $.get("foo.php")
  } catch (error) {
    alert("$.get failed!");
  }
})()

$.get returns a thenable object so it works with async and await .

deferred.done()

The deferred.done() method lets us add a callback that’s called when the deferred object is resolved.

For example, we can write:

$.get("https://jsonplaceholder.typicode.com/todos/1")
  .done(function() {
    alert("$.get succeeded");
  });

to make a GET request https://jsonplaceholder.typicode.com/todos/1 and add run something after that.

deferred.fail()

The deferred.fail() method lets us add a callback that’s called when the deferred object is rejected.

For example, we can write:

$.get("test.php")
  .done(function() {
    alert("$.get succeeded");
  })
  .fail(function() {
    alert("$.get failed!");
  });

to add that.

deferred.pipe()

We can use the deferred.pipe() method to filter and chain deferred objects.

It returns another deferred object.

We can use it by writing:

const defer = $.Deferred(),
  filtered = defer.pipe(function(value) {
    return value * 2;
  });defer.resolve(5);
filtered.done(function(value) {
  alert(value);
});

We call defer.pipe with a callback that takes the resolved value from the defer object, multipole by it by 2, and return it in the callback.

Then we call defer.resolve(5) to pass 5 as the value of value in the pipe callback.

And we get the finalvalue in the done callback, which is 10.

We can chain deferred by writing:

const url = 'https://jsonplaceholder.typicode.com/posts/1';
const url2 = 'https://jsonplaceholder.typicode.com/posts/2';
const request = $.ajax(url, {
    dataType: "json"
  })
  .pipe(function(data) {
    console.log(data)
    return $.ajax(url2);
  })
  .done(function(data) {
    console.log(data)
  });

We call pipe on the first deferred object returned by $.ajax and then call done to get the data from the 2nd $.ajax call.

Conclusion

We can work with deferred objects with various jQuery methods.