parallel asynchronous jQuery-AJAX-Requests blocking each other

Question

I use jQuery to do some asynchronous background data fetching. I stumbled upon the problem, that more than one parallel request to the same URL does not finish, until the first request handler is finished.

I created a simple example to demonstrate the problem:

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<button id="js">Click me!</button>
<div>Request 1: <span id="resp1">-</span></div>
<div>Request 2: <span id="resp2">-</span></div>
<script type="text/javascript">
    $('#js').click(function() {
        $('#resp1, #resp2').html('...');
        $.ajax({
            url : 'http://stackoverflow.com',
            async : true,
            complete: function(request, textStatus) {
                $('#resp1').html('complete');
                alert('The second request is not completed, until you close this alert!'); 
            }
        });
        $.ajax({
            url : 'http://stackoverflow.com',               
            async : true,
            complete: function(request, textStatus) { 
                    $('#resp2').html('complete');
            }
        });
    });
</script>
</body>
</html>

After the button is clicked, two parallel AJAX-Requests are made. The first one is completed normally, but the second not until the alert of the first one is closed. The problem remains the same, if you move the second ajax Request into the complete-Event handler of the first one.

Is this a bug or a feature? Is there a workaround?

Edit:

OK, I understand that alert() causes the problem. However I can't explain two other things.

When I move the second ajax-call into the complete handler of the first (before the alert()) and change the first ajax-call to be async:false, then it works. Shouldn't the alert() be causing the same problem??
The alert must be blocking more than the Browsers JS-Thread, because if I open the AJAX-Request in another tab, it still fails to load until I close the alert-Box in the first tab. JS not involved here. Strange. Is this perhaps another problem?

Simply don't use alert() - that's what is blocking, not the request. — Bergi
– Bergi, Commented Nov 20, 2013 at 12:59
alert completely halts the browser's JS thread. That's the issue. Always use console.log for debugging. — Rory McCrossan
– Rory McCrossan, Commented Nov 20, 2013 at 12:59
Wow, thanks for your fast feedback! I assume the same goes for confirm(). I don't use this entirely for debugging purposes, but also to show messages to users. Is this bad practice? What are (simple) alternatives? — Chrisman
– Chrisman, Commented Nov 20, 2013 at 13:17

gillyspy · Accepted Answer · 2013-11-21 00:13:06Z

The whole premise of completing or not is purely based on a race condition between execution of the async requests because the alert() in the callback of the first async request. If the second request was faster than the first (fast enough to make up for the fact that it was initiated after the first) then you wouldn't see what you are concerned about

about #1 no, this wouldn't be the same because when you have the ajax call before alert and when you use async : false the ajax request will finish completely before moving on (to the alert). In other words, you are completely synchronous at that point because you are in the callback of the only asynchronous event. Don't use async: false by the way.

as was said, alert() is blocking the execution.

FYI, you can make fiddles with this and play with timing -- Note the use of the delay in the data object of the request. Note in this example how both finish because of the timing I set up, but if you reverse it then it won't finish until alert() is cleared.

In the end DO NOT USE alert()!!

fiddle

marekful · Accepted Answer · 2013-11-20 13:00:44Z

1

This is expected. alert() blocks execution until it is closed.

What is happening when these lines are executed

$('#resp1').html('complete');
alert('The second request is not completed, until you close this

is that the first line fires the ajax request but the execution of the next line follows so quickly that the ajax request does not have time to finish. As soon as the modal alert dialogue is initialised, execution is suspended. The ajax request maybe in the state of still retrieving the response, maybe it is processing it but it will be paused until the alert is closed.

answered Nov 20, 2013 at 13:00

marekful

15.4k6 gold badges39 silver badges63 bronze badges

1 Comment

Chrisman Over a year ago

I understand. I edited my initial question, because I'm unsure if that is the only underlying problem...

Collectives™ on Stack Overflow

parallel asynchronous jQuery-AJAX-Requests blocking each other

2 Answers 2

fiddle

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related