setInterval runs continuously in Firefox on Android

Question

I have a short snippet of Javascript which I want to poll a server every couple of 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);

On most browsers that's what happens. There are a few one-off calls to updateCard, but on the whole the server shows ~1/2 connection per second per client.

However, when I access the page in Firefox on Android (49.0) the browser starts continuously polling /curr_card/, tens of times a second.

I've seen people suggest replacing the setInterval line with window.setInterval(function() {updateCard();},2000);, this doesn't help.

I'm pretty new to Javascript and AJAX, so have no idea why this is happening. Is it a bug in FF? I can post more code if requested.

Thanks in advance.

I don't know about any bugs. Have you tried to use ```window.setTimeout()```? If that works, you could just set a timer at the end of ```updateCard()```, that recursevly calls itself again... — Dario, Oct 18 '16 at 01:48
That's a nice idea to fall back on @Dario, but the problem with that is it possibly won't be exactly 2 seconds (if that's important). Gyppo, does it it continuously poll tens of times a second at the very start or only after a little bit? Also, is it safe to assume this doesn't happen in Chrome on Android? — Zach, Oct 18 '16 at 01:52
I can't put a recursive setTimeout, since the function gets called from elsewhere too. But I've made a recursive wrapper: `function continuousUpdate() { updateCard(); window.setTimeout(continuousUpdate,2000); } window.onload = continuousUpdate;` This has the same problem. I don't see the problem on Chrome on Android. — Samizdis, Oct 18 '16 at 01:59
Gyppo... please see [my plunker here](https://plnkr.co/edit/GqTPyC8uzFVTO8J5O1JH?p=preview) and tell me if it accurately represents your code and if the problem is present. It's not occurring on my android. — Zach, Oct 18 '16 at 02:01
Hi Zach, that looks pretty much like my code. It's hard to tell for sure whether FF is acting up since my phone is slightly overwhelmed by plunker, but I think the same issue is present, the scrollbar is shrinking far faster than it should for a line every two seconds. — Samizdis, Oct 18 '16 at 02:09
I wonder if there is a bug with the timer on that phone. I have firefox (49.0) on my phone and it's not doing it. I'm using a Sprint Galaxy S7. Are you using an emulator by chance? BTW... here is an embed version of the plunker which may be easier to read: https://embed.plnkr.co/GqTPyC8uzFVTO8J5O1JH/ — Zach, Oct 18 '16 at 02:11
No, but I am using Cyanogenmod (on a HTC M7). If you say it's working fine on Firefox on your phone (version 49.0?) I'd be tempted to assume it's a problem with my phone. If you don't mind, could I ask you to browse to http://quietyear.sambrown.eu to see if your phone triggers the behaviour on the actual code, and I'll watch the logs? — Samizdis, Oct 18 '16 at 02:14
Yep, I can see you, thanks. It's working just fine, I guess there's a bug in my phone. — Samizdis, Oct 18 '16 at 02:17
Try removing firefox completely from your phone and re-adding it. Also, be sure to submit this bug to Firefox for them to fix on HTC. It's gotta be something about the way they're handing the timer. — Zach, Oct 18 '16 at 02:18
Will do. I'm not sure what to do with this question, should I mark it off-topic? — Samizdis, Oct 18 '16 at 02:19
No this is a good reference and should be used in your bug report to Firefox. — Zach, Oct 18 '16 at 02:20

score 1 · Accepted Answer · answered Oct 18 '16 at 02:22

1

After testing and discussing in OP's comments, we concluded this must be an issue specific to Firefox on the OP's HTC M7, as it could not be reproduced on the same version Firefox on a Galaxy S7.

answered Oct 18 '16 at 02:22

Zach

3,157
1
19
32

num8er · Answer 2 · 2016-10-18T02:54:05.777

That may happen not only with Firefox on some device.

It may happen when response has not finished because of servers late answer but it sends another request and so on...

What if to do like this:

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

setInterval runs continuously in Firefox on Android

2 Answers2