Question

我正在使用此函数来延迟在项目进入时查看动画类。

$(function() {
  var itemQueue = [];
  var queueTimer;

  function processItemQueue() {
    var $delay = 100; // needs to be based on item data-delay attr
    if (queueTimer) {
      return;
    }

    queueTimer = window.setInterval(function() {
      if (itemQueue.length) {
        var $firstinque = $(itemQueue.shift());
        var $animation = $firstinque.attr('data-effect');

        $firstinque.addClass($animation);

      } else {
        window.clearInterval(queueTimer);
        queueTimer = null;
      }
    }, $delay);
  }

  $(".item-animate").waypoint(function() {
    itemQueue.push(this.element);
    processItemQueue();
  }, {
    offset: '90%'
  })
});

FIDDLE

基函数工作正常，但我需要根据项数据延迟属性设置延迟，我不能在setInterval中这样做。请参阅上面的小提琴获取更多信息。小提琴中的第二项延迟时间为500毫秒，因此应该稍后开始。任何帮助表示赞赏。

Answer 1

由于每个项目都被（waypoint）公平地同时调用，因此您需要根据您希望为该项目设置的特定延迟来增加项目序列中的数据延迟属性。我在这里增加200
HTML：

<div id="container">
 <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end -->
 <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="400"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="600"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="800"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="1000"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="1200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="1400"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="1600"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="1800"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="2000"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="200"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="400"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="600"></div>
  </div>
  <!-- anim end --> <!-- anim -->
  <div class="item">
    <div class="item-in item-animate" data-effect="show" data-delay="800"></div>
  </div>
  <!-- anim end -->


</div>

JS：

$(function() {
  var itemQueue = [];

  function processItemQueue() {
      if (itemQueue.length) {
        var $firstinque = $(itemQueue.shift());
        var $animation = $firstinque.attr('data-effect');
        $firstinque.addClass($animation);
      } 

  }

  $(".item-animate").waypoint(function() {
    itemQueue.push(this.element);
    var delay = $(this.element).data('delay');
    setTimeout(function(){
       processItemQueue();
    }, delay);
  }, {
    offset: '90%'
  })
})

示例：http://jsfiddle.net/tg5op333/5/

如何更新setInterval延迟？

1 个答案: