Bootstrap 进度条上的 Jquery 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 语句内)(在1500ms 中断时间)。

当进度条为 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 进度条是“自动画”的，所以使用直接停止点而不是每 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