SetInterval gecikmesi nasıl güncellenir?

Question

Görüntü işlevini, görüntülemeye geldiklerinde animasyon sınıfı eklemeyi geciktirmek için kullanıyorum.

$(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

Baz fonksiyonu çalışıyor ama ürün veri gecikme niteliğe dayalı olarak gecikmeler ayarlamak gerekiyor ve setInterval içinde bunu yapamam. Daha fazla bilgi için lütfen yukarıdaki keman'a bakınız. Kemanın ikinci maddesinin 500 ms gecikme süresi vardır, bu yüzden daha sonra ateş etmelidir. Herhangi bir yardım için teşekkür ederiz.

Answer 1

Her öğe (ara nokta) tarafından aynı anda adil bir şekilde çağrıldığından, bu öğeler için olmasını istediğiniz belirli gecikmelere göre öğe sırasındaki veri gecikme özniteliğini artırmanız gerekir.

<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: Burada ben 200
HTML artarak am

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

Örnek: http://jsfiddle.net/tg5op333/5/