setInterval delayを更新するにはどうすればよいですか？

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内であることを行う傾けます。詳細は上のフィドルをご覧ください。フィドルの2番目のアイテムは500msの遅延があるので、後で発射する必要があります。 何か助けていただければ幸いです。

Answer 1

すべてのアイテムは、（アイテムのシーケンスに含まれるデータ遅延属性を、そのアイテムに必要な特定の遅延に基づいて増加させる必要があります。

<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%' 
    }) 
}) 

例：[それが実行している間のsetIntervalの間隔を変更する]のhttp://jsfiddle.net/tg5op333/5/