jQuery and setTimeout stops working when browser inactive

Question

I have some jQuery code which will be executed every 6 seconds.

With Mozilla Firefox 51.0.1 it works fine. With Internet Explorer 11 it seems to be working just fine, but when I leave my computer, do something else, and come back, it is possible that Internet Explorer 11 has stopped running the script. For example, after several hours. In other words, it will not be executed every 6 seconds anymore. There are no error messages available.

How could I solve the problem?

<script src="/jquery-3.0.0.min.js"></script>

<script type="text/javascript">
<!--

$(document).ready(function(){

  valvonta = function() {
    var kaavio = 106; // 38;

    var a = performance.now();

    jQuery.post("hae_tilanteet.php", {
      kaavio: kaavio
    }).done(function(data) {
      var b = performance.now();

      $('#valvonta').html(data);

      var c = performance.now();

      // alert('search ' + (((b - a)/1000)%60) + ' s and update ' + (((c - b)/1000)%60) + ' s');

      setTimeout(valvonta, 6000);
    });
  };

  setTimeout(valvonta, 6000);

});

//-->
</script>

Try adding the `fail` function after `done`, just in case (but I guess an error would appear in the console). There's also `always` to execute code whether the call was successful or not. — nonzaprej, May 04 '17 at 07:30
@nonzaprej Thanks. Do you think that this might have something to do with jQuery's cache? — xms, May 04 '17 at 07:36
I don't know. Edit: No, the documentation says this: `Pages fetched with POST are never cached, so the cache and ifModified options in jQuery.ajaxSetup() have no effect on these requests.` @Erdogan Oksuz I was about to ask him, too, but I saw he uses setTimeout at the end of the method so I think it should be ok. — nonzaprej, May 04 '17 at 07:38
@ErdoganOksuz By using setTimeout I just want to make sure that the previous function call has ended before executing the function once again. — xms, May 04 '17 at 08:50
This is actually a known issue and it's not specific to IE only. But there are solutions: http://stackoverflow.com/questions/6032429/chrome-timeouts-interval-suspended-in-background-tabs — GOTO 0, May 04 '17 at 09:38
@GOTO0 Thanks, I checked out the solutions, but I still do not know how I should modify my code. — xms, May 04 '17 at 11:53
@xms One of the solutions suggests using [HackTimer](https://raw.githubusercontent.com/turuslan/HackTimer/master/HackTimer.min.js). You could just include that file in your HTML. — GOTO 0, May 04 '17 at 15:59
@GOTO0 I did not use HackTimer, but your hyperlink helped me. I will post my solution as a new answer. — xms, May 04 '17 at 19:56

score 1 · Answer 1 · answered May 04 '17 at 20:04

Thanks to @GOTO0, I modified my original code. Now it seems to me that the following code will solve my problem.

$(document).ready(function(){
  var vasen = 0;

  setInterval(function() {
    vasen++;

    $('#valvonta').stop(true,true).css("left", vasen);

    var kaavio = 106; // 38;

    var a = performance.now();

    jQuery.post("hae_tilanteet.php", {
      kaavio: kaavio
    }).done(function(data) {
      var b = performance.now();

      $('#valvonta').html(data);

      var c = performance.now();

      // alert('search ' + (((b - a)/1000)%60) + ' s and update ' + (((c - b)/1000)%60) + ' s');
    });
  }, 6000);
});

jQuery and setTimeout stops working when browser inactive

1 Answers1