jQuery 1.8, async: false with jqXHR ($.Deferred) is deprecated

Question

I have been having a few issues with ajax error function getting called while the script is taking a while to load. But I was able to fix it by adding async: false.

E.g:

$.ajax({
    type: 'POST',
    url: REQUEST_URL,
    async: false,
    data: {
        'id': id
    },
    dataType: 'json',
    success: function(output) { 
        // success
    },
    error: function() {
        alert('Error, please refresh the page');
    }
});

When reading the docs it says:

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the complete/success/error callbacks.

Q) What does the last part mean about jqXHR ($.Deferred)? Does this effect my script?

Answer 1

It does not affect your script.

It means that, when performing synchronous AJAX requests, one should not use the deferred API exposed by the object returned by $.ajax() (like done() or fail() for instance), but rely on the complete and error handlers instead.

In other words, your code already uses the right pattern. You would have to modify it if it used deferred operations like:

// Do not write this code.
$.ajax({
    type: 'POST',
    url: REQUEST_URL,
    async: false,           // <-- Synchronous request.
    data: {
        'id': id
    },
    dataType: 'json'
}).done(function(output) {  // <-- Use of deferred method.
    // success
}).fail(function() {        // <-- There also.
    alert('Error, please refresh the page');
});