Question

sample code on jsfiddle

var liSize = $('li').size();
var duration = 70;
var duration2 = 1000;
var rounds = 43;

$('#start').on('click', function() {
    var index = 0;
    var j = 0;

    for (var i = 0; i < rounds; i++) {
        if (i % liSize === 0) {
            index = 0;
        }

        if (i >= rounds - 5) {
            delay = (i * duration) + (j * duration2);
            j++;
        } else {
            delay = i * duration;
        }

        $('li').eq(index).delay(delay).queue(function() {
            var position = $('li').index(this);

            $(this).addClass('on');
            $('li').eq(position - 1).removeClass('on');
            $(this).dequeue();
        });

        index++;
    }

    return false;
});

这就是我模仿轮盘游戏的方式，rounds将是随机数，速度应该在最后五个盒子之前相同，但是在最后五个之前它变得缓慢，如何修复呢？ / p>

Answer 1

在第一个框获得on类之前，代码为10个元素创建了43个队列，具有43个不同的延迟持续时间。

这是另一种选择：在需要时创建每个队列 - 在一个框获得on类之后70ms（除了最后5个框的1000ms之后）。

以下是通过定义spin()函数来实现的，其中：

处理一个框。
在下一个框中递归调用spin()函数。

rounds是spins()函数中的参数（因此是局部变量）。它的值在每次递归调用中递减，并且spins()函数在达到零时不再被调用。

$('#start').on('click', function() {
  var rounds = 43;

  function spin(li, rounds) {
    var duration = rounds<5 ? 1000 : 70;

    $('li').stop(true);

    li.delay(duration).queue(function() {
      var nextBox= $(this).next('li');
      if(!nextBox.length) {
        nextBox= $('li:first');
      }

      $('li').removeClass('on');
      $(this).addClass('on');
      if(rounds-1) {
        spin(nextBox, rounds-1);
      }
    });
  } //spin

  spin($('li:first'), rounds);
});

Fiddle

如何一致地使队列持续时间

1 个答案: