Continuously looping in Firefox on Android is the setInterval function

Question

Continuously looping in Firefox on Android is the setInterval function

I have a brief section of JavaScript that I would like to use to check a server every few seconds and update the 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);

In most browsers, this is what occurs. There are occasional calls to updateCard, but generally speaking the server displays around half a connection per second per client.

However, when viewing the page in Firefox on Android (49.0), the browser suddenly starts polling /curr_card/ repeatedly, many times per second.

Some people have suggested replacing the setInterval line with

window.setInterval(function() {updateCard();},2000);

, but this does not solve the issue.

As a newcomer to JavaScript and AJAX, I am unsure why this is happening. Is it a bug in Firefox? I can provide more code upon request.

Thank you in advance.

javascript ajax firefox fennec

Answer 1

Answer №1

Following thorough testing and analysis in the original poster's comments, it was determined that this particular issue is unique to Firefox on the OP's HTC M7 device, as it was not able to be replicated on a Galaxy S7 running the same version of Firefox.

Answer 2

Following thorough testing and analysis in the original poster's comments, it was determined that this particular issue is unique to Firefox on the OP's HTC M7 device, as it was not able to be replicated on a Galaxy S7 running the same version of Firefox.

Answer 3

Answer №2

It's possible for this issue to occur not just with Firefox on certain devices.

The problem may arise when the response has not completed due to a delay in server response, leading to multiple requests being sent one after another.

One solution could be:

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

or:

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

Answer 4

It's possible for this issue to occur not just with Firefox on certain devices.

The problem may arise when the response has not completed due to a delay in server response, leading to multiple requests being sent one after another.

One solution could be:

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

or:

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

Continuously looping in Firefox on Android is the setInterval function

Answer №1

Answer №2

Similar questions

What are the steps to achieve consistent response behavior in POSTMAN that matches that of a web browser?

Display array information within a table using ajax

Failure to append an object to the array occurs when submitting an HTML form

Where can I find the @types for a specific lodash package?

Strange state manipulation in React JS using MaterialUI

an unsuccessful attempt to retrieve data was made

JavaScript's Selenium WebDriver - Explicit Waiting

Using Formik inside Material-UI's table components

Swap out the %20, which signifies a space in the iron router context

Is there a way to retrieve and gather all data from various scopes and then access them collectively?

Tips for declaring a non-reactive instance property in Vue.js with TypeScript

Performing a Jquery Ajax get request on multiple URLs within a single function

The redirection did not occur as no authorization token was detected

Wordpress problem with Bootstrap JavaScript code involving data-toggle="collapse"

Definition for TypeScript for an individual JavaScript document

Issue with HTML 5 audio player not functioning correctly in Chrome browsers when trying to forward or rewind playback

Error: The hyperlink in the response from the Ajax request is not functioning as expected

What is the process for attaching an on-click event listener by utilizing an argument that is passed to a function in JavaScript?

What is the best way to display a popup window on top of the parent window?

Ways to verify if the current user has blocked the target user using Acts-as-Follower