如何在不冻结网页的情况下同步调用 ajax

Question

我有一些 javascript 可以触发大约 100 次对 php 脚本的调用。 php 脚本占用大量内存并需要几秒钟才能完成，然后返回通过或失败的 json 响应。

我不希望 ajax 调用是异步的，因为服务器会停止运行 100 个自身实例，因此我尝试使用同步，唯一的问题是它在调用脚本时冻结网页一次。

如何一次触发一个 ajax 调用而不冻结我所在的页面？

var a = [];
    a[0] = 'test';
    a[1] = 'hello';
    a[2] = 'another';

$(document).ready(function(){ 
  $.each(a, function(k,v) {
$.ajax({
  url:'/this-script-takes-a-few-seconds-to-complete.php',
  async:false,
  data: {foo: v},
  success: function(data){      
    console.log(data);  
  }
});
  });
});

Answer 1

您可以放入一个执行下一次调用的函数，并从您的 success 处理程序中调用它，如下所示：

$(function(){ 
  var i = 0;
  function nextCall() {
    if(i == a.length) return; //last call was last item in the array
    $.ajax({
      url:'/this-script-takes-a-few-seconds-to-complete.php',
      data: { foo: a[i++] },
      success: function(data){      
        console.log(data);  
        nextCall();
      }
    });
  }
  nextCall();
});

虽然...更好的方法是不进行 100 次调用，除非这是某种测试套件，否则我会重新审视整个方法。

Answer 2

如果您不希望您的调用是异步的，那么浏览器将无法更新将冻结的 UI。为什么不能让它异步？而不是一次完成所有 100 个，只需等待一个完成，然后调用下一个。

Answer 3

你需要重构这个东西。 100 个 ajax 请求太疯狂了，而且它们都是同步的。

我建议你重构你的应用，这样你就可以解析所有数据并在一个异步 go 或几个异步请求中发送它，而不是 100 个。

如果您需要 100 个，请创建某种队列并按顺序异步处理它们。

Answer 4

问题在于 Ajax... 代表“异步 JavaScript 和 XML”...

试图同步执行 Ajax 违背了使用 Ajax 的初衷。

尝试使用线程池并异步运行。

Answer 5

编辑 - 正确答案

大多数浏览器会限制对单个服务器的 HTTP 请求数量，大概是为了防止出现与您试图防止的情况完全相同的情况（服务器过载）。我不确定现代浏览器的实际数字是多少，但我认为它比我在 2005 年在 Firefox 中观察到的旧“2”还要多。

一些资源：

• 在 Firefox 中，默认值似乎是 15：检查 about:config，然后查找 max-connections-per-server
• IE 似乎因连接类型和版本而异：http://msdn.microsoft.com/en-us/library/cc304129(VS.85).aspx
• Chrome 好像是 6：http://www.google.com/support/forum/p/Chrome/thread?tid=2218bcd015cdc0cc&hl=en

旧答案

此脚本将每 2 秒调用一次同步 $.ajax，每次将数据移出数组 a。在每个请求实际执行期间，UI 仍将锁定，但允许它在调用之间自我更新。我认为，这是完全同步和完全异步之间的一个很好的折衷。

请注意，此脚本具有破坏性 - a 完成后将为空。如果您需要a 的内容，那么您可能需要创建一个副本。

a = [
    'test',
    'hello',
    'another'
];

$(function() {
    var send = function() {
        $.ajax({
            url: '/this-script-takes-a-few-seconds-to-complete.php',
            async: false,
            data: {foo: a.shift()},
            success: function(data) {
                console.log(data)
            }
        });

        if (!a.length)
        {
            clearInterval(timer);
        }
    }

    var timer = setInterval(send, 2000);
});

Answer 6

我有类似的问题，我需要同步调用并且 IE 冻结了。简而言之，我想出了这种方法。

1. 我没有使用同步调用，而是使用 async:true。
2. 在 complete:function 中递归调用下一个 ajax 请求。

它允许我异步调用同步调用，所以我在前一个调用之后调用。