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

由于您有嵌套间隔，因此不会停止。每个间隔独立执行，直到它们被清除。

即使proggress-bar为25％，它也会被冻结1500ms，但主间隔仍然执行 - 每隔50ms设置一个新的（嵌套的if语句内部）间隔（在1500ms时间间隔30个新间隔）打破）。

当proggress-bar为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 proggress-bar是“self-animated”，所以使用直接停止点而不是每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);
});

Demo

Bootstrap进度条上的Jquery setInterval（）

1 个答案: