javascript - デキューにコールバックを追加

Question

jQuery でデキューが完了した後にコールバックを追加する方法を知っている人はいますか? そうでない場合、デキューに遅延を追加する方法を教えてもらえますか? どうもありがとう！

Answer 1

さらに情報が必要になるかもしれませんが、キューに入れられた特定のアイテムがキューから取り出された後に何らかのコードを呼び出そうとする場合は、元のキューに入れられた関数を独自の関数でラップできます。たとえば、次のように変更できます。

$("#xyz").queue(someFunction);

これに：

$("#xyz").queue(function() {
    someFunction();
    // your callback code here
});

シーケンスを継続するために、「someFunction」が dequeue を呼び出すと想定しています。

Answer 2

promise を使用できます ( http://api.jquery.com/promise/ )。これは、私が（文字通り）書いたばかりのコードで、ショーなどが開始される前に、一部の div が非表示になるようにします。promise の done 呼び出しに渡された関数は、すべての効果が終了した後にのみ実行されます。そこに next() (=>dequeue) 呼び出しを入れて、キューに入れられた次のアイテムが実行されるようにします。

<style>
#pieces { width: 300px; height: 100px; background-color: lightblue;}
#pieces .piece { width: 75px; height: 75px; border: 1px solid grey; float: left;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var q = $({});;

function hidePieces() {
   q.queue(function(next){
      var pieces = $($("#pieces .piece").get().reverse());
      pieces.each( function(i) {
         $(this).delay(300*i).slideUp(1000);
      });
      pieces.promise().done(function(){ next(); });
   } );
}

function showPieces() {
   q.queue(function(next){
      var pieces = $("#pieces .piece");
      pieces.each( function(i) {
         $(this).delay(300*i).slideDown(1000);
      });
      pieces.promise().done(function(){ next(); });
   } );
}
$(function(){
   for( i=0;i<5;i++ ){
      hidePieces();showPieces();
   }
});
</script>
<div id="pieces">
<div class="piece" id="p1"></div>
<div class="piece" id="p2"></div>
<div class="piece" id="p3"></div>
</div>