Is Asnyc : False Really That Bad?

My question consists of two parts. In my webpage, i am creating some of my divs dynamically using ajax post calls to get some information from db. Then i create my divs. My structu

Solution 1:

If you want a better solution i think you should look in to javascript promises. Q.js is a good place to start.

Solution 2:

Nobody prefers to use a UI that frequently goes unresponsive for 1-3 seconds. They would much prefer to use a web-site that stays alive, even as they do things. Really it's as simple as that.

It takes a little more work to design for async Ajax calls, but it generates a better user experience. And, once you learn how and take advantage of tools available, it's not hard at all, just different than synchronous programming.

Since you've tagged your question with jQuery, you have jQuery's Ajax support available to you and every jQuery Ajax call returns a promise. Promises can make async programming work more like (though not identical to) synchronous programming. You can write something like:

$.ajax(...).then(function(data) {
    // process results here
});

If you want to sequence several asynchronous operations, you can even chain promises.

$.ajax(...).then(function(data) {
    // process results here
    // kick off next ajax call
    return $.ajax(...);
}).then(function(data) {
    // process results of 2nd ajax call        
});

Or, if you want to launch three parallel async operations (for better performance) and then do something when all three finish, you can do this:

$.when($.ajax(...), $.ajax(...), $.ajax(...)).then(function(data1, data2, data3) {
    // process results of all three ajax calls here
});

---

Oh, and if you want to use things like JSONP to do cross domain Ajax/JSON, you can ONLY use async.

Solution 3:

Use callbacks of AJAX success and error. If you are using synchronous AJAX calls, than you are locking all interfaces of your website, till all responses are done.

$.ajax({
    url: '#',
    data: {id: 1},
    success: function(dataFromServer) {
       callFunctionToProcess(dataFromServer);
       /* OR */
       var directlyProcess = dataFromServer;
    },
    error function(data) {
       var yourRequestHasFailed = true; // e.g. you get 500 server error
    }
});

EDIT FOR jfriend00

It will not lock any other tabs of your browser, as it will not lock any of the following: OS, BIOS, house doors, car doors or any other lockable item.