时间戳

首页 > 解决方案 > javascript Bootstrap 进度条填写 10 秒

javascript - javascript Bootstrap 进度条填写 10 秒

问题描述

我在 Bootstrap 中有一个进度条，每 1 秒填充 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 秒）运行一次，如果 isPaused 为假，则每 1 秒填充 10%，如果事情正确，则另一个

标签： javascriptjquery

解决方案

您的tick函数每秒调用一次，因此只有每秒才会决定是否增加进度条。

我猜你发现的“滞后”只是想象的，因为你的滚动永远不会像 1、3 或 5 秒那样精确，而是像 1.4 或 3.8 秒那样。因此，您认为进度条的增加是延迟的，因为它需要一些毫秒才能tick再次调用该函数。

为了避免这种影响，您可以添加一个在不执行滚动时（换句话说，当滚动停止时）触发的侦听器。在这种情况下，您应该重置该setInterval功能。

推荐阅读