HTML5 Progress Bar Pause when in another tab

Question

My progress bar loader which i'm using to display a sorten amount of seconds while my page is loading in Javascript is having some trouble.

If i click another tab while its counting it will pause, and will only resume when you go back. How would i go by allowing it to count even though you're in another tab

$(document).ready(function() {
        if(!Modernizr.meter){
            alert('Sorry your brower does not support HTML5 progress bar');
        } else {
            var progressbar = $('#progressbar'),
                max = progressbar.attr('max'),
                time = (800/max)*10,    
                value = progressbar.val();

            var loading = function() {
                value += 1;
                addValue = progressbar.val(value);

                $('.progress-value').html(value + '%');

                if (value == max) {
                    clearInterval(animate);     $(".demo-wrapper").remove();   $("#details").fadeIn("slow");     $("#motion1").html("Report for Registration.");        $("#motion").remove();   
                }
                    if (value == 1) {
                        $("#motion").html("Loading Page..");   
                }
                      if (value == 86) {
                        $("#motion").html("Connecting..");   
                }
            };

            var animate = setInterval(function() {
                loading();
            }, time);
        };


    });

Here's an example http://jsfiddle.net/w977Q/

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

Maybe have a look at the accepted answer here: How can I make setInterval also work when a tab is inactive in Chrome?

It appears this is basically a function of the browser not wanting to use processing power on tabs that aren't in focus.

edited May 23 '17 at 12:20

Community

1
1

answered Feb 08 '14 at 05:20

Spdermn02

179
4

score -1 · Answer 2 · edited Jun 20 '20 at 09:12

-1

Hope this helps you

setInterval('yourFunction();', 1000); // this will work even on other tab

and

setInterval(yourFunction, 1000);      // this will run only if on current tab

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 08 '14 at 05:13

ArmaGeddON

339
1
10

Comment if there is any prob – ArmaGeddON Feb 08 '14 at 11:43
just tested it on chrome 60.0.3112.101 and my function is not longer called if I change tab... also can you explain why it is supposed to work? – neoDev Aug 21 '17 at 00:52
Down vote because both functions get executed when you close the tabs. At least when you keep the Chrome Dev Tools open. I was surprised that `setInterval('yourFunction();', 1000);` even works, but it does. – adriaan May 28 '18 at 17:09

HTML5 Progress Bar Pause when in another tab

2 Answers2

Hope this helps you