排队多个 AJAX 请求，等待响应而不冻结浏览器？ [复制]答案

【问题标题】：Queue multiple AJAX requests, waiting for response and not freezing browser? [duplicate]排队多个 AJAX 请求，等待响应而不冻结浏览器？ [复制]
【发布时间】：2013-07-05 07:15:59
【问题描述】：

我正在编写一个脚本，我需要循环一个 AJAX 请求数组：

$('#fetchPosts').click(function(){ 

    for(var i=0; i < link_array.length; i++) {

        settings = {
           // some object not relevant
        }

        var status = main_ajaxCall(settings, i); // ajax call
     }
});

function main_ajaxCall(settings, i) {

   $.ajax({ 
     type: "POST",
     url: "../model/insert.php",
     data:{obj_settings: settings},
     dataType: "json",
     cache: false,
     success: function (data) {
         // some handeling here
         return 0;
     },
     error: function(XMLHttpRequest, textStatus, errorThrown) {
         return 1;
     },
};

为什么 AJAX 请求会立即触发？它似乎没有等待来自 model/insert.php 的响应，有没有办法强制它在触发下一个 AJAX 请求之前等待响应？

编辑 1：

我好像没说清楚，抱歉，我不想让它等，我要排队。

我无法在一个请求中拨打电话，这在我目前的情况下是不可能的。

【问题讨论】：

等待响应是什么意思？你想按顺序发送循环请求吗
这是一个通用的非 jquery 技术来做到这一点。也可以轻松执行多个线程（同时请求）：stackoverflow.com/questions/13250746/…

标签： javascript jquery ajax queue

【解决方案1】：

如果要等待响应，请将 async 设置为 false（默认值：true）

$.ajax({
    async: false,
    ...

http://api.jquery.com/jQuery.ajax/

如果您不想阻塞，可以使用.ajaxComplete() 设置成功处理函数，如果您想等待所有连接完成，则必须跟踪活动的 AJAX 连接 - How to know when all ajax calls are complete

最好的解决方案是将 AJAX 请求的数量减少到一个。如果您必须进行 AJAX 请求循环，则可以在某处简化逻辑（也许将其放在服务器中？）

编辑 1： （响应 OP 编辑）

如果你想排队 AJAX 请求，这个问题之前已经回答过：

您也可以使用这些库（您只需要谷歌）：

【讨论】：

它会冻结浏览器
它会冻结浏览器

【解决方案2】：

您的 AJAX 调用将等待来自服务器的响应，但这样做异步。也就是说，您的脚本将继续执行而不是在服务器响应时阻止浏览器。当服务器响应时（或请求超时 - 通常是几秒钟），您的 success: 或 error: 函数将执行。

你这里代码的效果是根据link_array长度创建多个并发请求。

您可以在 AJAX 调用中指定 async:false，但这会在进行所有 AJAX 调用时冻结浏览器。

您应该重写您的代码以执行所有处理作为您的success: 函数的一部分。我建议您重写代码以将所有请求组合成一个，并进行一次 AJAX 调用而不是多次调用，并让服务器将所有响应作为一个块返回。我不能确切地建议你如何做到这一点 - 它依赖于实现。

已编辑： 作为对您的澄清的回应，如果您希望按顺序调用它们，则需要成功函数来调用下一个。然后，您将有一系列成功调用下一个，其成功调用下一个，其成功调用下一个.. 等等，直到最后一个进行最终处理。一种方法是将索书号传递给成功函数。

【讨论】：

【解决方案3】：

它会立即触发并且不会等待，因为这是 AJAX 最擅长的（第一个 A 代表异步）。

对服务器的请求可能需要很长时间才能响应，并且在大多数情况下，不希望用户的浏览器冻结或阻止他们执行任何其他操作。如果这样做，您可能只使用普通请求。

这就是你给它函数成功错误的原因，所以它可以在服务器响应时调用它们。

如果您在调用 insert.php 时不希望在浏览器中发生任何事情，您可以在所有带有加载图像的内容上放置一个叠加层（例如深色 div），并在成功时将其删除。

也许将 $('#fetchPosts') 元素替换为“正在加载...”文本，然后在完成后将其反转。隐藏 fetchPosts 元素的可见性并添加不同的“正在加载..”元素是一个不错的方法。

【讨论】：