36

When to use use async false or async true in an ajax call. In terms of performance does it make any difference ?

example : 

$.ajax({
        url : endpoint,
        type : "post",
        async : false,
        success : function(data) {
                if (i==1){  
                getMetricData(data)}

                else if (i==2)
                {
                    capture = data;
                }

        }
    });
user2569524
  • 1,651
  • 7
  • 32
  • 57
  • Possible duplicate: http://stackoverflow.com/questions/1052453/ajax-requests-synchronous-vs-asynchronous – Connor Tumbleson Aug 21 '13 at 19:37
  • 1
    It's not a question of performance. – JJJ Aug 21 '13 at 20:01
  • Basically, it's helpful for when you need to make code execution or service call execution in some specific manner such like asynchronous or synchronous manner that time it will very useful. as per your code define after this code you define some code and ajax call make async option true then it will execute such like asychnorously. – VjyV Apr 17 '17 at 06:09

5 Answers5

50

It's not relative to performance...

You set async to false, when you need that ajax request to be completed before the browser passes to other codes:

<script>
    // ...
    $.ajax(... async: false ...); // Hey browser! first complete this request, 
                                  // then go for other codes

    $.ajax(...); // Executed after the completion of the previous async:false request.
</script>
Amin Saqi
  • 18,549
  • 7
  • 50
  • 70
  • 2
    I will like to correct one thing that async in ajax always affects the performance as it always waits for one request to get completed just like threads. – divyanshu gupta Jul 24 '20 at 11:54
2

It is best practice to go asynchronous if you can do several things in parallel (no inter-dependencies). If you need it to complete to continue loading the next thing you could use synchronous, but note that this option is deprecated to avoid abuse of sync:

jQuery.ajax() method's async option deprecated, what now?

Christophe Roussy
  • 16,299
  • 4
  • 85
  • 85
2
  1. When async setting is set to false, a Synchronous call is made instead of an Asynchronous call.
  2. When the async setting of the jQuery AJAX function is set to true then a jQuery Asynchronous call is made. AJAX itself means Asynchronous JavaScript and XML and hence if you make it Synchronous by setting async setting to false, it will no longer be an AJAX call.
  3. for more information please refer this link
Apurv Chaudhary
  • 1,672
  • 3
  • 30
  • 55
1

In basic terms synchronous requests wait for the response to be received from the request before it allows any code processing to continue. At first this may seem like a good thing to do, but it absolutely is not.

As mentioned, while the request is in process the browser will halt execution of all script and also rendering of the UI as the JS engine of the majority of browsers is (effectively) single-threaded. This means that to your users the browser will appear unresponsive and they may even see OS-level warnings that the program is not responding and to ask them if its process should be ended. It's for this reason that synchronous JS has been deprecated and you see warnings about its use in the devtools console.

The alternative of asynchronous requests is by far the better practice and should always be used where possible. This means that you need to know how to use callbacks and/or promises in order to handle the responses to your async requests when they complete, and also how to structure your JS to work with this pattern. There are many resources already available covering this, this, for example, so I won't go into it here.

There are very few occasions where a synchronous request is necessary. In fact the only one I can think of is when making a request within the beforeunload event handler, and even then it's not guaranteed to work.

In summary. you should look to learn and employ the async pattern in all requests. Synchronous requests are now an anti-pattern which cause more issues than they generally solve.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
0

yes bro it make difference.

if async is true : it means request send to server in background is enabled. it means you do not need to refresh whole page. only portion of the page will be reload.

if async is false : it means request send to server and when response coming whole page will be reload.

you can enable async by setting it true

$.ajax({
    url : endpoint,
    type : "post",
    async : true,
....... more code .....

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.

Kumar Abhiii
  • 1
  • 1