CODEWITHSUNDEEP
javascriptjquerysettimeout
EC In Va
EC In Va

Reputation: 47

Timing issue with setTimeout

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

Upvotes: 4

Views: 94

Answers (6)

Zen-Lee Chai
Zen-Lee Chai

Reputation: 451

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.

Upvotes: 2

Oriol
Oriol

Reputation: 287980

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>

Upvotes: 1

Andi N. Dirgantara
Andi N. Dirgantara

Reputation: 2051

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

Upvotes: 1

Paul
Paul

Reputation: 141829

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.

Upvotes: 4

Alp
Alp

Reputation: 3105

Looks like below expression is taking too long.

Math.ceil(cur*100/max)

Simply replace that expression with 

cur

and see how it flies.

Upvotes: 2

Alpha
Alpha

Reputation: 7858

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)

Upvotes: 2

Related Questions