0

数秒ごとにサーバーをポーリングして DOM を更新したい Javascript の短いスニペットがあります。

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);

ほとんどのブラウザでは、それが起こります。への 1 回限りの呼び出しがいくつかありますがupdateCard、全体として、サーバーはクライアントごとに 1 秒あたり約 1/2 の接続を示しています。

ただし、Android (49.0) の Firefox でページにアクセスすると、ブラウザーは/curr_card/1 秒間に数十回、継続的にポーリングを開始します。

setInterval 行を に置き換えることを提案する人を見てきましたがwindow.setInterval(function() {updateCard();},2000);、これは役に立ちません。

私はJavascriptとAJAXにかなり慣れていないので、なぜこれが起こっているのか分かりません. FFのバグですか？リクエストがあれば、さらにコードを投稿できます。

前もって感謝します。

4

2 に答える 2

1

OP のコメントでテストおよび議論した後、Galaxy S7 上の同じバージョンの Firefox では再現できなかったため、これは OP の HTC M7 上の 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 に答える