Jquery Bootstrap 进度条上的 setInterval()

Question

我的目标是制作 Bootstrap 的进度条动画，使其每 50 毫秒增加 5%，但我希望它在 25%、55% 和 85% 时暂停 1500 毫秒。这是我尝试过的，但是它在 25% 时暂停，但在 55% 和 85% 时没有暂停。

var value = 5;
setInterval( function() {
    $( ".progress-bar" ).css( "width", value + "%" ).attr( "aria-valuenow", value );
    if ( value == 25 || value == 55 || value == 85 ) {
        setInterval( function() {
            value += 5;
        }, 1500 );
    } else {
        value += 5;
    }
}, 50 );

Answer 1

它不会停止，因为你有嵌套的间隔。每个间隔都独立执行，直到它们被清除。

即使进度条处于 25%，它会冻结 1500 毫秒，但主间隔仍然执行 - 每 50 毫秒设置一个新的（嵌套在 if 语句中）间隔（当时有 30 个新间隔1500 毫秒中断）。

当进度条为 25% 时，您的这部分代码执行了 30 次：

    setInterval( function() {
        value += 5;
    }, 1500 );

您可以使用 setTimeout 代替：

var value = 0;

function barAnim(){
    value += 5;
    $( ".progress-bar" ).css( "width", value + "%" ).attr( "aria-valuenow", value );    
    if ( value == 25 || value == 55 || value == 85 ) { 
        return setTimeout(barAnim, 1500); 
    }
    return value >= 100 || setTimeout(barAnim, 50);
}

barAnim();

Demo

或者，因为 bootstrap 进度条是 "self-animated"，使用直接停止点而不是每 50 毫秒更新一次：

var stops = [25, 55, 85, 100];
$.each(stops, function(index, value){
    setTimeout(function(){
        $( ".progress-bar" ).css( "width", value + "%" ).attr( "aria-valuenow", value ); 
    }, index * 1500);
});

Demo

Jquery Bootstrap 进度条上的 setInterval()

Jquery setInterval() on Bootstrap Progress Bar

jquery

twitter-bootstrap

setinterval