计时器上的jQuery UI进度条

我在页面顶部有一个进度条，用来显示用来刷新所有图表的1分钟计时器。我遇到的问题是，它似乎从来都不一致

function headerBar() {
    var progressbar = $('#timerBar');
    progressbar.progressbar({
        value: 0
    });

    function progress() {
        var val = progressbar.progressbar('value') || 0;
        progressbar.progressbar('value', val + 5);
        if (val < 99) {
            setTimeout(progress, 3000);
        }
    }
    progress();
}
headerBar();
  setInterval(function () {
     headerBar();
  }, 60 * 1000);

第一次运行正常，但第二次似乎需要1/2的时间，之后的每一次似乎都会缩短计数时间

---

这是您需要的明确间隔。。像这样

function headerBar() {
    var progressbar = $('#timerBar');
    progressbar.progressbar({
        value: 0
    });

    function progress() {
        var val = progressbar.progressbar('value') || 0;
        progressbar.progressbar('value', val + 5);
        if (val < 99) {
            setTimeout(progress, 3000);
        }
    }
    progress();
    clearInterval()
}
headerBar();
setInterval(function () {
        headerBar();
    }, 60 * 1000);

---

SitePoint上设置超时的更多示例

您需要一个清晰的间隔。。像这样

function headerBar() {
    var progressbar = $('#timerBar');
    progressbar.progressbar({
        value: 0
    });

    function progress() {
        var val = progressbar.progressbar('value') || 0;
        progressbar.progressbar('value', val + 5);
        if (val < 99) {
            setTimeout(progress, 3000);
        }
    }
    progress();
    clearInterval()
}
headerBar();
setInterval(function () {
        headerBar();
    }, 60 * 1000);

---

更多关于SitePoint设置超时的示例，请参见您的评论：

---

以下是您的评论：

---

万岁！你正在进入一种比赛状态。由于setTimeout不能保证像setInterval那样每3000ms调用一次，即使它这样做了，您仍然会遇到这个问题，最有可能发生的情况是，您的interval会在progress停止添加更多超时之前调用headerBar！这里有一个时间表来澄清这一点：

你的进度条是95

超时1->我最好呼叫进度

进度->将进度条设置为val+5=100！val95<99？是 啊我最好设定一个超时时间再给自己打电话

间隔->你的时间到了！校长

headerBar->我将进度设置为0，然后开始更多的进度

进度->将进度条设置为5！暂停再给我自己打电话

进度->将进度条设置为10！暂停再给我自己打电话！哎呀，我从来没有到过val>99停止反复给自己打电话

时光流逝

间歇->是时候加快速度了！校长

但是你如何解决这个问题呢？首先，您需要将进度检查更改为使用val+5<99。这仍然不能避免你遇到的问题，比如打20个超时电话比你的一个间隔时间要长——你需要一些方法来显示你的进度，以停止所有的进度

一种方法是在headerBar中添加一些心智检查：

---

万岁！你正在进入一种比赛状态。由于setTimeout不能保证像setInterval那样每3000ms调用一次，即使它这样做了，您仍然会遇到这个问题，最有可能发生的情况是，您的interval会在progress停止添加更多超时之前调用headerBar！这里有一个时间表来澄清这一点：

你的进度条是95

超时1->我最好呼叫进度

进度->将进度条设置为val+5=100！val95<99？是 啊我最好设定一个超时时间再给自己打电话

间隔->你的时间到了！校长

headerBar->我将进度设置为0，然后开始更多的进度

进度->将进度条设置为5！暂停再给我自己打电话

进度->将进度条设置为10！暂停再给我自己打电话！哎呀，我从来没有到过val>99停止反复给自己打电话

时光流逝

间歇->是时候加快速度了！校长

但是你如何解决这个问题呢？首先，您需要将进度检查更改为使用val+5<99。这仍然不能避免你遇到的问题，比如打20个超时电话比你的一个间隔时间要长——你需要一些方法来显示你的进度，以停止所有的进度

一种方法是在headerBar中添加一些心智检查：

---

在headerbar函数中调用函数progress之后放置setInterval函数setInterval函数运行所有代码以获取JSON并更新图表，因此它需要独立运行。我需要headerBar函数完全重置计时器，这样setTImeout函数就不会堆叠。在调用headerBar函数中的函数progress之后，将setInterval函数放在headerBar函数中setInterval函数运行所有代码以获取JSON并更新图表，因此它需要独立运行。我需要headerBar函数完全重置计时器，这样setTImeout函数就不会堆叠。setInterval有很多事情要做-我需要进度条在新的一分钟开始时重置。setInterval不仅适用于progressbar，而且progressbar必须与setInterval同步。我喜欢js fiddle！感谢我在jquery中搜索免费倒计时计时器的代码，这就是我想要的：setInterval有很多事情要做——我需要进度条在它开始新的一分钟时重置。setInterval不仅适用于progressbar，而且progressbar必须与setInterval同步。我喜欢js fiddle！感谢我在jquery中搜索免费倒计时计时器的代码，这就是我想要的：我无法清除间隔，因为setInterval每60秒运行一次混乱的代码-每次setInterval循环时，我都需要progressbar重置。您是否调用头条两次？setInterval开始前的第一次第一个60秒进度-完成时是调用第一个setInterval循环时。setInterval直到页面加载s后60秒才运行其任何代码

---

o progressbar这次需要显示牙槽，我需要来这里，这样当我请求帮助解决我的问题时，有人可以告诉我我遇到了问题。看看这个问题，我认为它会有帮助。我无法清除间隔，因为setInterval每60秒运行一次混乱的代码-我需要progressbar在每次setInterval循环时重置你在调用header吗bar两次？setInterval开始前60秒的第一次进程-当它结束时，调用第一个setInterval循环。setInterval在页面加载60秒后才运行其任何代码，因此progressbar需要显示这次的toothanks，我需要来这里，以便在我请求帮助解决问题时，有人能告诉我我有问题。看看这个问题，我认为它将有助于加载

function headerBar() {
    var progressbar = $('#timerBar');
    var lastProgress = 0;
    progressbar.progressbar({
        value: lastProgress
    });

    function progress() {
        var val = progressbar.progressbar('value') || 0;
        if (val != lastProgress) {
            // Someone's modified the bar! I best stop before I do too much progress!
            return;
        }
        progressbar.progressbar('value', val + 5);
        if (val + 5 < 99) {
            setTimeout(progress, 3000);
        }
    }
    progress();
}

var headerBar = (function () {
    var inProgress = false;
    var progressbar = $('#timerBar'); // Save some trees by calling jQuery selection only once!
    return function headerBar() {
        if (inProgress) {
            clearTimeout(inProgress);
            inProgress = false;
        }
        progressbar.progressbar({
            value: 0
        });
        function progress() {
            var val = progressbar.progressbar('value') || 0;
            progressbar.progressbar('value', val + 5);
            if (val < 99) {
                inProgress = setTimeout(progress, 3000);
            }
        }
        progress();
    }
})();

// Pass the jQuery element so you not only have to select it once, but don't depend on the headerBar knowing where to look for it.
var headerBar = (function (progressbar) {
    return function headerBar(callback) {
        progressbar.progressbar({ value : 0 });
        (function progress() {
            var newVal = (progressbar.progressbar('value') || 0) + 5;
            progressbar.progressbar('value', newVal);
            if (newVal < 99) setTimeout(progress, 3000);
            else callback();
        })();
    }
})($('#timerBar'));

function heavyLifting() {
    // get stuff, etc
    headerBar(heavyLifting);
}