如何更新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延迟？

回答

相关问题