javascript Bootstrap Прогрессбар заполняется за 10 секунд

Question

У меня есть индикатор прогресса в Bootstrap, который заполняет каждые 1 сек. c 10% от индикатора выполнения.

Проблема в том, что сайт отстает от всего браузера (chrome), но почему?

Это мой код, который заполняет индикатор прогресса

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

Так что все просто. У меня есть несколько опций, таких как isPaused и некоторые другие, которые останавливают заполнение индикатора выполнения, когда пользователь прокручивает его, чем он должен остановиться.

Но почему он задерживается? Интервал запускается каждые 1000 (т. е. 1 se c), чтобы заполнить каждые 1 se c 10%, если isPaused false, и другой, если все верно

Answer 1

Ваша tick функция вызывается каждую секунду, поэтому только каждую секунду принимается решение о том, увеличивать индикатор выполнения или нет.

Полагаю, обнаруживаемые вами "лаги" просто мнимые, потому что ваша прокрутка никогда не займет точное количество секунд, например, 1, 3 или 5 секунд, а что-то вроде 1,4 или 3,8 секунды. Таким образом, вы думаете, что увеличение индикатора выполнения задерживается, потому что до повторного вызова функции tick требуется несколько миллисекунд.

Чтобы избежать этого эффекта, вы можете добавить прослушиватель, который срабатывает, когда прокрутка не выполняется ( другими словами, когда прокрутка останавливается). В этом случае вам следует сбросить функцию setInterval.