Ajax Call Freezes UI, Locked UI During Ajax Call

Solutions: 1. Change the logic to use asynchronous ajax calls.

This may require some re-factoring of the code and be time consuming
but is the best solution.




2. If decided to keep the ajax call synchronous then put this ajax call into
setTimeout to call it with delay and be able to show the animation of
any type (e.g. loading spinner) , this can be shown for some short moment
like 300 milliseconds before the UI will be locked by sync ajax call.




$('#go').click(function() { $(this).after('<div id="loading">Loading...</div>'); setTimeout(function() { $.ajax({ url: '/echo/html/', type: 'post', async: false, data: { html: '<p>AJAX DONE</p>', delay: 3 }, success: function(data) { console.log(data); $('#go').after(data); }, error: function() { alert('Error!'); }, complete: function() { $('#loading').remove(); } }); }, 0); });




help URL http://jsfiddle.net/ambiguous/zLnED/