最初の仕事として遅れていない

Question

まず最初に、コードの要件を言いたいと思います。毎回クラスを追加し、同じクラスを数秒後に削除したい。だから私はこのようにした

var stops = [35,30,25,20,15,10]; 

$.each(stops, function(index, value){ 
    setTimeout(function(){ 
     $(".progress-bar").css("width", value + "%").attr("aria-valuenow", value); 
     $('.decalir span').html((value/5)).addClass('change').delay(1500). 
       queue(function() { 
        jQuery('.decalir span').removeClass('change'); 
       }); 
    }, index * 5000); 
}); 

しかし、これは初めてのことです。最初の時間の後で動作していない、クラスを削除しないでください。

HTML

<div class="progress"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" > 
    <span class="sr-only">0% Complete</span> 
    </div> 
</div> 

ありがとうご参照ください。

Answer 1

あなたのキュー関数の'next '変数を渡すのを忘れたようです。ここでそれを行う必要があります。

var stops = [35, 30, 25, 20, 15, 10]; 

$.each(stops, function(index, value) { 
    setTimeout(function() { 
    $(".progress-bar").css("width", value + "%").attr("aria-valuenow", value); 
    $('.decalir span').html((value/5)).addClass('change').delay(1500). 
    queue(function(next) { 
     jQuery('.decalir span').removeClass('change'); 
     next(); 
    }); 
    }, index * 5000); 
}); 

私はここで効果を確認するために、コードのわずかな変化をした：https://jsfiddle.net/qbkt33bx/18/

これはjQueryの1.4、であると呼ばれる関数のようhttps://api.jquery.com/queue/

でドキュメントからです最初の引数として別の関数を渡しました。呼び出されると、自動的に次の項目をデキューし、キューを移動したままにします。

Answer 2

ちょうどこの

var stops = [35,30,25,20,15,10]; 
$.each(stops, function(index, value){ 
    var rand = Math.round(Math.random() * (3000 - 500)) + 10000; 
    setTimeout(function(){ 
     $(".progress-bar").css("width", value + "%").attr("aria-valuenow", value); 
     $('.decalir span').html('<span class="change">'+(value/5) + '</span>').delay(1500). 
       queue(function() { 
        jQuery('.decalir span').removeClass('change'); 
       }); 
    }, index * rand); 
}); 

にjQueryのコードを変更し、それが働いています。しかし、唯一の問題はスパン内にスパンを作成することです。しかし、スパンの代わりにpタグを使用するのは大丈夫です。