2016-03-26 29 views
0

私はアイテムにアニメーションクラスを追加するのを遅らせるために、この関数を使用しています。setInterval delayを更新するにはどうすればよいですか?

$(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の遅延があるので、後で発射する必要があります。 何か助けていただければ幸いです。

+3

可能な複製(HTTPここで私は200
HTMLで増加しています://stackoverflow.com/questions/1280263/changing-the-interval-of-setinterval-while-its-running) – Xufox

+0

時間を変更することはできません一度定義されたsetIntervalまたはsetTimeoutの値です。できることは、それを破棄して再作成することだけです。 – Soren

+1

固定遅延とリピートを使用するはずのsetIntervalを使用するのではなく、固定遅延で一度だけトリガーするsetTimeoutsの束を一緒にストリングします。 – James

答えて

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/

+0

でも悪くはないが、2列目の項目がずっと遅れているので、再び200から再開しなければならない。 – Benn

+0

は最後の4つのアイテムだと思う2番目の行については、それを200から再度設定し、後で呼び出されるアイテムのシーケンスに対してそれを増やすことができます –

関連する問題