如何更新setInterval延遲？

我正在使用此函數來延遲向項目添加動畫類時，他們進來查看。如何更新setInterval延遲？

$(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毫秒，所以它應該在晚些時候啓動。任何幫助表示讚賞。

來源

2016-03-26 Benn

[更改的setInterval的時間間隔，而它的運行]的可能的複製（HTTP ：//stackoverflow.com/questions/1280263/changing-the-interval-of-setinterval-while-its-running） – Xufox

你不能改變時間一旦定義了setInterval或setTimeout的值 - 你所能做的就是放棄它並重新創建它。 – Soren

而不是使用應該使用固定延遲和重複的setInterval，將一串setTimeouts串聯在一起，這隻會在固定的延遲時間內觸發一次。 – James

由於每個項目在同一時間被（航點）公平地調用，所以您需要根據您希望爲該項目設置的特定延遲增加項目序列中的數據延遲屬性。

<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：在這裏，我通過200
HTML增加

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

來源

2016-03-26 21:26:23

還不錯，但第二行的項目延遲了很多，他們應該從200重新啓動，這就是爲什麼我有以前的功能。 – Benn

對於我認爲是最後四個項目的第二行，您可以簡單地將其設置爲200，然後將其增加爲稍後調用的那個項目序列 –

如何更新setInterval延遲？

回答

相關問題