Chrome 不处理 jquery ajax 查询

Question

我在 jquery 中有以下查询。它正在读取使用 Nginx 的长轮询模块设置的 Nginx 订阅/发布对的“发布”地址。

function requestNextBroadcast() {
        // never stops - every reply triggers next. 
        // and silent errors restart via long timeout. 
        getxhr = $.ajax({
            url: "/activity",
            // dataType: 'json',
            data: "id="+channel,
            timeout: 46000, // must be longer than max heartbeat to only trigger after silent error. 
            error: function(jqXHR, textStatus, errorThrown) {
                alert("Background failed "+textStatus);  // should never happen 
                getxhr.abort(); 
                requestNextBroadcast();  // try again
            },
            success: function(reply, textStatus, jqXHR) {
                handleRequest(reply);   // this is the normal result. 
                requestNextBroadcast(); 
            }
        });
    }

代码是聊天室的一部分。发送的每条消息都会以空 rply（带有 200/OK）回复进行回复，但会发布数据。这是在数据返回时读取订阅地址的代码。

使用超时功能，聊天室中的所有人每 30 到 40 秒发送一条简单消息，即使他们没有输入任何内容，因此该代码有大量数据可供读取 - 至少 2 条甚至更多消息每 40 秒。

代码在 EI 和 Firefox 中是 100% 坚如磐石的。但是大约 5 次阅读中的一篇在 Chrome 中失败了。

当 Chrome 失败时，超时时间为 46 秒。

日志显示在任何时候有一个 /activity 网络请求未完成。

我已经在这段代码上爬了 3 天，尝试了各种想法。每次 IE 和 Firefox 工作正常而 Chrome 失败。

我看到的一个建议是让调用同步 - 但这显然是不可能的，因为它会锁定用户界面太久。

编辑 - 我有一个部分解决方案：代码现在是这样的

function requestNextBroadcast() {
    // never stops - every reply triggers next. 
    // and silent errors restart via long timeout. 
    getxhr = jQuery.ajax({
        url: "/activity",
        // dataType: 'json',
        data: "id="+channel,
        timeout: <?php echo $delay; ?>,
        error: function(jqXHR, textStatus, errorThrown) {
            window.status="GET error "+textStatus;
            setTimeout(requestNextBroadcast,20);  // try again
        },
        success: function(reply, textStatus, jqXHR) {
            handleRequest(reply);   // this is the normal result. 
            setTimeout(requestNextBroadcast,20); 
        }
    });
}

结果有时回复会延迟到 $delay (15000) 发生，然后排队的消息到达太快而无法跟进。使用这种新安排，我无法让它丢弃消息（仅在关闭 netwrok optomisation 的情况下进行测试）。

我非常怀疑延迟是由于网络问题 - 所有机器都是我的一台真实机器中的虚拟机，并且我的本地 LAN 没有其他用户。

编辑 2（英国夏令时星期五 2:30） - 将代码更改为使用承诺 - 动作的 POST 开始显示相同的症状，但接收方开始正常工作！ （？？？？？？！！！？？？）。 这是 POST 例程 - 它正在处理一系列请求，以确保一次只有一个未完成。

function issuePostNow() {
    // reset heartbeat to dropout to send setTyping(false) in 30 to 40 seconds. 
    clearTimeout(dropoutat);
    dropoutat = setTimeout(function() {sendTyping(false);},  
                           30000 + 10000*Math.random()); 
    // and do send 
    var url = "handlechat.php?";
    if (postQueue.length > 0) {
        postData = postQueue[0];
        var postxhr = jQuery.ajax({ 
            type: 'POST',
            url: url,
            data: postData,
            timeout: 5000
        })
        postxhr.done(function(txt){
            postQueue.shift();  // remove this task
            if ((txt != null) && (txt.length > 0)) {
                alert("Error: unexpected post reply of: "+txt)
            }
            issuePostNow();
        });
        postxhr.fail(function(){
            alert(window.status="POST error "+postxhr.statusText);
            issuePostNow();
        });
    }
}

关于 8 中的一项操作，对 handlechat.php 的调用将超时并出现警报。一旦警报被确定，所有排队的消息都会到达。

而且我还注意到，handlechat 调用在写入其他人会看到的消息之前就停止了。我想知道它是否可能是 php 对会话数据的一些奇怪处理。我知道它会小心地将调用排队，以免会话数据损坏，所以我一直小心使用不同的浏览器或不同的机器。只有 2 个 php 工作线程，但是 php 不用于处理 /activity 或提供静态内容。

我也认为这可能是 nginx worker 或 php 处理器的短缺，所以我提出了这些。现在让事情失败变得更加困难——但仍然有可能。我的猜测是 /activity 调用现在失败了 30 次，并且根本不会丢弃消息。

感谢大家的意见。

---

调查结果摘要。

1) 这是 Chrome 中的一个错误，已经在代码中出现了一段时间。
2) 如果运气好，该错误可以显示为未发送的 POST，并且当超时时，它会使 Chrome 处于重复 POST 将成功的状态。
3) 用于存储 $.ajax() 返回的变量可以是本地的或全局的。新的（承诺）和旧的格式调用都触发了这个错误。
4）我还没有找到解决这个问题的方法或方法。

伊恩

Answer 1

我在使用 Chrome 时遇到了非常相似的问题。我正在进行 Ajax 调用，以便每秒从服务器获取时间。显然，Ajax 调用必须是异步的，因为如果不是，它将在超时时冻结接口。但是一旦 Ajax 调用中的一个失败，随后的每个调用也是如此。我首先尝试将超时设置为 100 毫秒，这在 IE 和 FF 中运行良好，但在 Chrome 中却不行。我最好的解决方案是将类型设置为 POST 并为我解决了 chrome 的错误：

   setInterval(function(){ 
      $.ajax({
         url: 'getTime.php',
         type: 'POST',
         async: true,
         timeout: 100,
         success: function() { console.log("success"); },
         error: function() { console.log("error"); }
       });
   }, 1000);

更新： 我相信这里实际的潜在问题是 Chrome 的缓存方式。似乎当一个请求失败时，该失败会被缓存，因此永远不会发出后续请求，因为 Chrome 会在启动后续请求之前获取缓存的失败。如果您转到 Chrome 的开发人员工具并转到“网络”选项卡并检查正在发出的每个请求，就可以看到这一点。在失败之前，每秒钟都会向 getTime.php 发出 ajax 请求，但在 1 次失败之后，永远不会发起后续请求。因此，以下解决方案对我有用：

   setInterval(function(){ 
      $.ajax({
         url: 'getTime.php',
         cache: false,
         async: true,
         timeout: 100,
         success: function() { console.log("success"); },
         error: function() { console.log("error"); }
       });
   }, 1000);

这里的变化是我禁用了对这个 Ajax 查询的缓存，但是为了这样做，类型选项必须是 GET 或 HEAD，这就是我删除 'type: 'POST'' 的原因（GET 是默认值）。

Answer 2

尝试将您的轮询功能移动到 webworker 中，以防止在 chrome 中冻结。 否则，您可以尝试使用 jquery 对象的 ajax .done() 。那个总是在 chrome 中为我工作。

Answer 3

我觉得 getxhr 应该以“var”为前缀。您不想每次都需要一个完全独立的新请求，而不是在成功/失败处理过程中覆盖旧请求吗？可以解释为什么添加 setTimeout 时行为会“改善”。我也可能遗漏了一些东西；）

Answer 4

评论不会格式化代码，因此作为第二个答案重新发布：

我认为 Michael Dibbets 正在处理 $.ajax.done 的问题——延迟模式将处理推到事件循环的下一轮，我认为这是这里需要的行为。请参阅：http://www.bitstorm.org/weblog/2012-1/Deferred_and_promise_in_jQuery.html 或 http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/

我会尝试类似：

function requestNextBroadcast() { 
  // never stops - every reply triggers next.
  // and silent errors restart via long timeout.

  getxhr = jQuery.ajax({
    url: "/activity",
    // dataType: 'json',
    data: "id="+channel,
    timeout: <?php echo $delay; ?> 
  });

  getxhr.done(function(reply){
    handleRequest(reply);
  });

  getxhr.fail(function(e){
    window.status="GET error " + e;
  });

  getxhr.always(function(){
    requestNextBroadcast();
  });

注意：我很难找到有关 Promise.done 和 Promise.fail 的回调参数的文档：(

Answer 5

也许可以通过更改推送模块设置来解决（有一些） - 你能发布这些吗？

从我的头顶：

• 将其设置为间隔轮询，会有点丑陋的解决它
• 并发设置可能会有一些影响
• 可能会使用消息存储来避免丢失数据

我还会使用 Charles 之类的东西来查看网络/应用程序层到底发生了什么