setInterval 在 Android 上在 Firefox 中连续运行

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中的错误吗？如果需要，我可以 post 更多代码。

提前致谢。

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 中连续运行

setInterval runs continuously in Firefox on Android

javascript

ajax

firefox

fennec