0

我有一小段 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/，每秒数十次。

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

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

提前致谢。

4

2 回答 2

1

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

于 2016-10-18T02:22:10.527 回答
0

这不仅可能发生在某些设备上的 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);
于 2016-10-18T02:41:06.463 回答