javascript - 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(); 
            }
        });
    }

该代码是聊天室的一部分。发送的每条消息都以空回复(200/OK)回复，但数据已发布。这是在数据返回时读取订阅地址的代码。

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

代码在 EI 和 Firefox 中 100% 坚如磐石。但是在 Chrome 中大约有 5 次读取失败。

当 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 的情况下进行测试)。

我非常怀疑延迟是由网络问题引起的——所有机器都是我一台真实机器中的虚拟机，我的本地局域网没有其他用户。

编辑 2(英国夏令时星期五 2:30)- 将代码更改为使用 promise - 操作的 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 对 session 数据的一些奇怪处理。我知道它会仔细排队调用，以免 session 数据损坏，所以我一直小心使用不同的浏览器或不同的机器。只有 2 个 php 工作线程，但是 php 不用于处理/activity 或提供静态内容。

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

感谢大家的投入。

---

调查结果摘要。

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

伊恩

Answer 1

我在使用 Chrome 时遇到了非常相似的问题。我正在进行 Ajax 调用，以便每秒从服务器获取时间。显然，Ajax 调用必须是异步的，因为如果不是，它将在超时时卡住接口(interface)。但是一旦 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)。