Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does "async: false" do in jQuery.ajax()?

Tags:

jquery

People also ask

What is use of async in jQuery AJAX?

The jQuery Ajax async is handling Asynchronous HTTP requests in the element. It is a procedure to send a request to the server without interruption. It is an Asynchronous method to send HTTP requests without waiting response. It is a function to working on a server without associating more than on request.

What is the difference between async false and async true in jQuery AJAX?

by default async is true. it means process will be continuing in jQuery ajax without wait of request. Async false means it will not go to next step untill the response will come. By default async is true process will be continuing in jQuery ajax without wait of request.

What is the meaning of async in AJAX?

Asynchronous (in Ajax) processes incoming requests in a constant event stack and sends small requests one after the other without waiting for responses. In other words, asynchronous ajax call allow the next line of code to execute, whereas synchronous call stop JavaScript execution until the response from server.

How do I stop async false in AJAX?

Don't just use callback functions as you might read on the web or in other answers. Learn about Deferred and Promise objects, and instead of returning the data, return a promise that you can use to attach behavior to when that promise is 'resolved'.


Does it have something to do with preventing other events on the page from firing?

Yes.

Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called. If you set async: true then that statement will begin it's execution and the next statement will be called regardless of whether the async statement has completed yet.

For more insight see: jQuery ajax success anonymous function scope


  • async:false = Code paused. (Other code waiting for this to finish.)
  • async:true = Code continued. (Nothing gets paused. Other code is not waiting.)

As simple as this.


Async:False will hold the execution of rest code. Once you get response of ajax, only then, rest of the code will execute.


If you disable asynchronous retrieval, your script will block until the request has been fulfilled. It's useful for performing some sequence of requests in a known order, though I find async callbacks to be cleaner.


Setting async to false means the instructions following the ajax request will have to wait for the request to complete. Below is one case where one have to set async to false, for the code to work properly.

var phpData = (function get_php_data() {
  var php_data;
  $.ajax({
    url: "http://somesite/v1/api/get_php_data",
    async: false, 
    //very important: else php_data will be returned even before we get Json from the url
    dataType: 'json',
    success: function (json) {
      php_data = json;
    }
  });
  return php_data;
})();

Above example clearly explains the usage of async:false

By setting it to false, we have made sure that once the data is retreived from the url ,only after that return php_data; is called


One use case is to make an ajax call before the user closes the window or leaves the page. This would be like deleting some temporary records in the database before the user can navigate to another site or closes the browser.

 $(window).unload(
        function(){
            $.ajax({
            url: 'your url',
            global: false,
            type: 'POST',
            data: {},
            async: false, //blocks window close
            success: function() {}
        });
    });

From

https://xhr.spec.whatwg.org/#synchronous-flag

Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user's experience. (This is a long process that takes many years.) Developers must not pass false for the async argument when the JavaScript global environment is a document environment. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an InvalidAccessError exception when it occurs. The future direction is to only allow XMLHttpRequests in worker threads. The message is intended to be a warning to that effect.