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/

这来自https://api.jquery.com/queue/

的文档

从jQuery 1.4开始，被调用的函数将另一个函数作为第一个参数传递。调用时，会自动使下一个项目出列并使队列保持移动。

Answer 2

只需将jQuery代码更改为此

即可

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);
});

它正在发挥作用。但唯一的问题是在跨度中创建跨度。但是没关系，如果使用p标签而不是span。

延迟不能作为第一次工作

2 个答案: