javascript – 并行异步jQuery-AJAX-Requests阻塞对方

2019年7月21日 240次阅读

我使用jQuery来做一些异步后台数据获取.我偶然发现了这个问题,在第一个请求处理程序完成之前,对同一个URL的多个并行请求没有完成.

我创建了一个简单的例子来演示这个问题：

<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 : 'https://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 : 'https://stackoverflow.com',               
            async : true,
            complete: function(request, textStatus) { 
                    $('#resp2').html('complete');
            }
        });
    });
</script>
</body>
</html>

单击按钮后,将生成两个并行的AJAX请求.第一个正常完成,但第二个没有,直到第一个的警报关闭.如果将第二个ajax请求移动到第一个ajax请求的完整事件处理程序中,问题仍然存在.

这是一个错误还是一个功能？
有解决方法吗？

编辑：

好的,我明白alert()会导致问题.但是我无法解释另外两件事.

>当我将第二个ajax调用移动到第一个完整处理程序(在alert()之前)并将第一个ajax调用更改为async：false时,它就可以工作了.警报()不应该导致同样的问题??
>警报必须比Browsers JS-Thread阻止更多,因为如果我在另一个选项卡中打开AJAX-Request,它仍然无法加载,直到我关闭第一个选项卡中的alert-Box. JS没有参与这里.奇怪.这可能是另一个问题吗？

最佳答案 完成或不完成的整个前提纯粹基于执行异步请求之间的竞争条件,因为第一个异步请求的回调中的alert().如果第二个请求比第一个请求快(足够快以弥补它在第一个之后启动的事实)那么你就不会看到你关注的是什么

关于#1 no,这不会是相同的,因为当你在警告之前进行ajax调用和使用async时：false ajax请求将在完成之前完成(到警报).换句话说,您在此处完全同步,因为您处于唯一异步事件的回调中.顺便说一下,不要使用async：false.

如上所述,alert()阻止了执行.

仅供参考,您可以使用此功能并使用计时 – 请注意在请求的数据对象中使用延迟.请注意,在此示例中,由于我设置的时间,两者是如何完成的,但是如果你反转它,那么在alert()被清除之前它将不会完成.

最后不要使用警报()!!

fiddle

点赞