Question

我有一小段Javascript，我想每隔几秒轮询一次服务器并更新DOM。

function updateCard() {    
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            card = JSON.parse(this.responseText);
            document.getElementById("season").innerHTML = card.season;
        }                  
    };                     
    xhttp.open("GET", "/curr_card/", true);
    xhttp.send();
}
window.onload = updateCard;
window.setInterval(updateCard,2000);

在大多数浏览器上都会发生这种情况。对updateCard进行一些一次性调用，但整体上服务器每个客户端每秒显示~1 / 2连接。

然而，当我在Android（49.0）的Firefox中访问该页面时，浏览器开始连续轮询/curr_card/，每秒数次。

我见过有人建议用window.setInterval(function() {updateCard();},2000);替换setInterval行，这没有帮助。

我对Javascript和AJAX很新，所以不知道为什么会这样。这是FF中的错误吗？如果需要，我可以发布更多代码。

提前致谢。

Answer 1

在OP的评论中进行测试和讨论之后，我们得出结论，这必须是针对OP的HTC M7上的Firefox特有的问题，因为它无法在Galaxy S7上的同一版本的Firefox上重现

Answer 2

这可能不仅发生在某些设备上的Firefox上。

由于服务器延迟回答而没有完成响应，但它会发送另一个请求等等，可能会发生......

如果这样做会怎么样：

function updateCard(before, after) {    
    if(before) {
      before();
    }

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            card = JSON.parse(this.responseText);
            document.getElementById("season").innerHTML = card.season;
        }

        if(after) {
          after();
        }
    };                     
    xhttp.open("GET", "/curr_card/", true);
    xhttp.send();
}

window.onload = updateCard;

var updateCardRunning = false;
setInterval(function() {
  if(updateCardRunning === true) {
    console.log('postponing to next schedule');
    return;
  }

  updateCard(
    function() {updateCardRunning = true;},
    function() {updateCardRunning = false;}
  );
}, 2000);

或：

 function updateCard() {    
    var xhttp = new XMLHttpRequest();
    window.xhttp = xhttp;

    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            card = JSON.parse(this.responseText);
            document.getElementById("season").innerHTML = card.season;
        }
    };

    xhttp.open("GET", "/curr_card/", true);
    xhttp.send();
}

window.onload = updateCard;
setInterval(function() {
  if(window.xhttp) {
    window.xhttp.abort();
  }
  updateCard();
}, 2000);

setInterval在Android上的Firefox

2 个答案: