I'm confused by this synchronous jquery ajax request. The ajax loader doesn't show until after the ajax call is plete. I'm well aware that the synchronous request will block the UI, but why does it start blocking before that line of code has been hit? I must be misunderstanding something fundamental about execution order.

            $("#ajax-loader").show(1, function(){
                $.ajax({
                    url: xxx,
                    type: "POST",
                    async: false,
                    success: function (data) {
                        hideAjaxLoader();
                    }
                });
            });

I'm confused by this synchronous jquery ajax request. The ajax loader doesn't show until after the ajax call is plete. I'm well aware that the synchronous request will block the UI, but why does it start blocking before that line of code has been hit? I must be misunderstanding something fundamental about execution order.

            $("#ajax-loader").show(1, function(){
                $.ajax({
                    url: xxx,
                    type: "POST",
                    async: false,
                    success: function (data) {
                        hideAjaxLoader();
                    }
                });
            });

• javascript
• jquery

• 1 It should by asynchronous if you don't want to block the UI. Just remove async: false and it will work. – Reinstate Monica Cellio Commented Oct 27, 2016 at 9:45
• Because it's synchronous?! Generally you should never use async:false – Liam Commented Oct 27, 2016 at 9:45
• 1 Possible duplicate of What does "async: false" do in jQuery.ajax()? – Liam Commented Oct 27, 2016 at 9:46
• 2 You just must note that DOM will be rendered (your loader will be shown) after all current synchronous code will be executed. That is why loader not shown before request. – Andrey Commented Oct 27, 2016 at 9:47
• 1 @Liam: See the question -- the OP is clearly aware of that. The question is why is it preventing the loader from showing when in theory it's called after the loader is showing. – T.J. Crowder Commented Oct 27, 2016 at 9:47

1 Answer 1

Even though jQuery believes the animation is plete when it calls your code containing the synchronous ajax call, that doesn't mean the browser has done all of its work to render the result before that callback. And since most browsers pletely block their UI during a synchronous ajax call, it doesn't get around to it until later.

Obviously, wherever possible, just don't use synchronous ajax, since it has this behavior of blocking the UI.

But, if you absolutely cannot avoid making it synchronous (I've never encountered a valid example of such a situation; I'm told they exist), add a brief delay after jQuery thinks the animation is done before starting your ajax. Firefox in particular seems to want a fair bit of time:

$("#ajax-loader").show(1, function(){
    setTimeout(function() {
        $.ajax({
            url: xxx,
            type: "POST",
            async: false,
            success: function (data) {
                hideAjaxLoader();
            }
        });
    }, 50); // 50 ms
});

Again, I strongly remend not using synchronous ajax, but if you need to, just delay the onset.