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

Returning a 404 Error stating "Invalid request to /api/users/register."

Troubleshooting JavaScript If-Else Statements

Ways to conceal or deactivate button controls on videojs?

the term 'this' does not pertain to the user object within the mongoose model

The utilization of CakePHP buttons for submitting forms, along with the seamless integration of

I'm attempting to showcase an HTML file by using res.sendFile within the Express framework

Is it possible to have unique color tags in Material UI Autocomplete?

Using Javascript to parse a regular expression in a string

What is the best way to display a child component inside an iframe using Vue.js?

Dynamic starting point iteration in javascript

Angular and AngularJS directives work together to indicate events on a line chart

Troubleshooting unexpected behavior with Custom Guest middleware in Nuxt Project

Encountering Problems with Dependencies in Selenium Webdriver 2.20 for .Net Client?

Unable to access specific data from the JSON string retrieved from the backend, as it is returning a value of undefined

InnerHTML syntax for creating the button in the cell is not functioning properly with the HTML onclick event

Creating an HTML5 input field with the type "datetime-local" that works seamlessly in Firefox

Running AngularJS controllers should only occur once the initialization process has been fully completed

Transformation of JSON data from Array to Object

Navigating the rollout of a fresh new design

Using Jquery to send data with Ajax through a POST request to an endpoint