2016-10-18 34 views
0

Ich habe einen kurzen Ausschnitt von Javascript, die ich alle paar Sekunden einen Server abfragen und das DOM aktualisieren möchte.setInterval läuft kontinuierlich in Firefox auf Android

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

Auf den meisten Browsern passiert das. Es gibt ein paar einmalige Anrufe zu updateCard, aber im Allgemeinen zeigt der Server ~ 1/2 Verbindung pro Sekunde pro Client.

Allerdings, wenn ich auf die Seite in Firefox auf Android (49.0) zugreifen, startet der Browser kontinuierlich Abfragen /curr_card/, Dutzende Male pro Sekunde.

Ich habe Leute vorgeschlagen, die SetInterval-Linie mit window.setInterval(function() {updateCard();},2000); zu ersetzen, das hilft nicht.

Ich bin ziemlich neu in Javascript und AJAX, also habe keine Ahnung, warum das passiert. Ist es ein Fehler in FF? Ich kann auf Anfrage mehr Code posten.

Vielen Dank im Voraus.

+1

Ich weiß nicht über irgendwelche Fehler. Haben Sie versucht, '' 'window.setTimeout()' ''? Wenn das funktioniert, könntest du am Ende von '' 'updateCard()' '' einfach einen Timer setzen, der sich selbst wieder aufruft ... – Dario

+2

Das ist eine gute Idee, auf @Dario zurückzugreifen, aber das Problem dabei ist es wird möglicherweise nicht genau 2 Sekunden sein (wenn das wichtig ist). Gyppo, macht es ständig Dutzende von Malen pro Sekunde am Anfang oder nur nach ein wenig? Kann man davon ausgehen, dass dies in Chrome unter Android nicht der Fall ist? – Zach

+0

Ich kann kein rekursives setTimeout setzen, da die Funktion auch von woanders aufgerufen wird. Aber ich habe einen rekursiven Wrapper erstellt: 'function continuousUpdate() {updateCard(); window.setTimeout (continuousUpdate, 2000); } window.onload = continuousUpdate; ' Dies hat das gleiche Problem. Ich sehe das Problem nicht in Chrome auf Android. – Samizdis

Antwort

1

Nach dem Testen und Diskutieren in den Kommentaren von OP, haben wir festgestellt, dass dies ein Problem für Firefox auf dem HTC M7 des OP sein muss, da es nicht auf der gleichen Version Firefox auf einem Galaxy S7 reproduziert werden konnte.

0

Das kann nicht nur mit Firefox auf einigen Geräten passieren.

Es kann passieren, wenn Antwort, weil der Server spät Antwort nicht beendet hat, aber es sendet eine weitere Anforderung und so weiter ...

Was passiert, wenn wie dies zu tun:

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

oder:

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