Timing issue with setTimeout

Question

The code below demonstrates the issue I am having.

When the the js executes, the progress bar fills, as expected rapidly until the max has been reached.

However, the span#pbarval container is updated very slowly and completes LONG after the progress bar has finished.

$(document).ready(function () {
    var max= 20000,
        cur=0;
    function updatePBar(){
        cur++;
        jQuery("#pbar").val(cur);
        jQuery("#pbarval").html("" + Math.ceil(cur*100/max) + "%");
        if (cur<=max){
            setTimeout(updatePBar, 10);
        }
    }
    updatePBar();
});

You can see the code executing here: http://jsfiddle.net/EricBrian/fhtp6rpf/

Can somebody explain why this is? How to make it keep up with the progress bar?

Also, I noticed that if I switch tabs, the setTimeout seems to pause. The percentage does not update until I switch back to the tab it is running in.

Thanks! -e

you are dividing by `max`. – Daniel A. White Jul 03 '15 at 23:16 — Daniel A. White, Jul 03 '15 at 23:16

score 4 · Accepted Answer · answered Jul 03 '15 at 23:17

You're using cur for the value of the progress bar, so the progress bar is full when cur === 100, but you're displaying cur*100/max as the percentage which doesn't reach 100% until cur == 20000.

You should use the same formula cur*100/max for both, and since you want the quick speed you should also divide your max by 100:

http://jsfiddle.net/Paulpro/fhtp6rpf/2/

$(document).ready(function () {
    var max= 200,
        cur=0;
    function updatePBar(){
        cur++;
        jQuery("#pbar").val(cur*100/max);
        jQuery("#pbarval").html("" + Math.ceil(cur*100/max) + "%");
        if (cur<max){
            setTimeout(updatePBar, 10);
        }
    }
    updatePBar();
});

I also changed the test cur<=max to cur<max since you probably do not mean to increment cur an extra time when it is already at max.

score 2 · Answer 2 · answered Jul 03 '15 at 23:16

2

Your progress bar max is 100 but your javascript variable max is 2000.

As such, the progress bar fills much quicker because it reaches it right away.

This particular expression is the one guilty for it:

Math.ceil(cur*100/max)

answered Jul 03 '15 at 23:16

Alpha

7,586
8
59
92

score 2 · Answer 3 · answered Jul 03 '15 at 23:16

2

Looks like below expression is taking too long.

Math.ceil(cur*100/max)

Simply replace that expression with

cur

and see how it flies.

answered Jul 03 '15 at 23:16

Alp

3,027
1
13
28

score 2 · Answer 4 · edited May 23 '17 at 11:59

2

This is an answer to part of your question. setTimeout is designed to be active when the tab is active. So the behavior regarding the progress bar not being updated when the tab is no active is normal. You can over come this using this method here.

edited May 23 '17 at 11:59

Community

1
1

answered Jul 03 '15 at 23:25

Zen-Lee Chai

431
1
4
10

`Also, I noticed that if I switch tabs, the setTimeout seems to pause. The percentage does not update until I switch back to the tab it is running in.` – Zen-Lee Chai Jul 03 '15 at 23:27

score 1 · Answer 5 · answered Jul 03 '15 at 23:21

It's just wrong at your cur

$(document).ready(function () {
     var max= 20000,
         cur=0;

     function updatePBar(){
         cur++;
         var value = Math.ceil((cur/max) * 100);
         jQuery("#pbar").val(value);
         console.log(cur)
         jQuery("#pbarval").html("" + value + "%");
         if (cur<=max){
             setTimeout(function(){updatePBar();}, 10);
         }
     }
     updatePBar();
});

score 1 · Answer 6 · answered Jul 03 '15 at 23:22

1

You are assigning different value to the value of the progress and to the percentage.

Just reuse the same value:

var max = 20000,
    cur = 0;
(function updatePBar() {
  pbarval.innerHTML = (pbar.value = Math.ceil(++cur * 100 / max)) + "%";
  if (cur < max) setTimeout(updatePBar, 10);
})();

<progress id="pbar" value="0" max="100"></progress>
<span id="pbarval"></span>

answered Jul 03 '15 at 23:22

Oriol

274,082
63
437
513

1

Note I skipped `var pbarval = document.getElementById('pbarval'), pbar = document.getElementById('pbar');` for simplicity. This is standard but bad practice. Don't skip it in production code. – Oriol Jul 03 '15 at 23:27

Timing issue with setTimeout

6 Answers6