启动进度栏上的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%，它也会冻结1500ms，但主间隔仍然执行-每50ms设置一个新的（嵌套在if语句中）间隔（1500ms休息时有30个新间隔）。

当进度条为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();

演示

---

或者，因为引导程序进度条是"自动画"，所以使用直接停止点，而不是每50ms更新一次：

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

演示