Geek Answers Handbook

Parallel asynchronous jQuery-AJAX requests block each other

I use jQuery to get asynchronous background data. I came across a problem that more than one concurrent request to the same URL does not end until the first request handler completes.

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 clicking the button, two parallel AJAX requests are executed. The first is executed normally, and the second is not until the warning of the first is closed. The problem remains the same if you move the second ajax request to the full event handler of the first.

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

Edit:

OK, I understand that alert () is causing the problem. However, I cannot explain two other things.

  • ajax- ( ()) ajax- : false, . () ?

  • , JS-Thread, , AJAX-Request , , . JS . . , ?

+4
2

, alert() . ( , , ), ,

# 1 , , ajax , async : false, ajax , ( ). , , . async: false .

, alert() .

FYI, . delay data . , - , , , alert() .

alert()!!

fiddle

+1

. alert() .

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

, ajax, , ajax . , . ajax , , , , .

+1

More articles:


All Articles