javascript Bootstrap Progressbar fill in 10 seconds

Question

I have a Progressbar in Bootstrap that fills every 1 sec 10% of the progressbar.

The problem is, that the site lags over the whole browser (chrome), but why?

That's my code that fills the Progressbar

var isPaused = false;
$(window).scroll(function(){
    var ScrollTop = parseInt($(window).scrollTop());
    if (ScrollTop > 10) {
        isPaused = true;
    } else {
        isPaused = false;
    }
});


var timeleft = 1;
var table_updated = 0;
var timeleft_zahl = 10;
var tick = function() {
    if(!isPaused && $("#page-1").hasClass("active") && !$(".modal").hasClass("show")) {
        document.getElementById("progressBar").style.width = timeleft*10+"%";
        document.getElementById("refreshcountdown").innerHTML = timeleft_zahl-1;
        timeleft += 1;
        timeleft_zahl -= 1;
        if(timeleft >= 11){
            notificationcheck();
            timeleft = 0;
            timeleft_zahl = 11;
            if(table_updated >= 10) {
                location.reload();
                table_updated = 0;
            } else {
                get_table_data(1);
                table_updated += 1;
            }
        }
    }
}

timer = setInterval(tick, 1000);

So it's just simple. I have a few options, like isPaused and some other things that stops the progressbar filling, cause when user scroll, than it must stop.

But why does it lag? the Interval runs every 1000 (so 1 sec) to fill every 1 sec 10% if isPaused false and the other if things are correct

score 0 · Answer 1 · answered Jan 14 '20 at 15:10

0

Your tick function is called every second, thus only every second there is a decision whether to increase the progress bar or not.

I guess the "lags" you discover are just imaginary because your scrolling will never take an exact amount of seconds like 1, 3 or 5 seconds but something like 1.4 or 3.8 seconds. Thus, you think the increase of your progress bar is delayed because it takes some milliseconds until the tick function is called again.

To avoid this effect you could add a listener that fires when no scrolling is performed (in other words, when the scroll stops). In that case you should reset the setInterval function.

answered Jan 14 '20 at 15:10

SparkFountain

2,110
15
35

Did you have an example (code) for me please? If a user is on the site and doesnt scroll, the interval runs cause every 1 sec the progressbar must go 10% more... – txn Jan 14 '20 at 15:25
[This StackOverflow thread](https://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling) provides solutions how you can track if the user stops scrolling. In that case, just call `clearInterval(timer);`. – SparkFountain Jan 14 '20 at 15:31
i dont understand the main problem what you mean... Cause if i kick the hole scroll thing out of my code, its also lagging... Its lagging cause the interval calls every 1 sec i think, but i need that to update progressbar :/ – txn Jan 14 '20 at 15:43

javascript Bootstrap Progressbar fill in 10 seconds

1 Answers1