javascript - 添加回调到出队

Question

有谁知道在 jQuery 中的出列完成后如何添加回调？如果没有，您能告诉我如何为出队添加延迟吗？太感谢了！

Answer 1

可能需要更多信息，但如果您试图在特定排队项目出队后调用一些代码，您可以用您自己的包装原始排队函数。例如，您可以更改为：

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

对此：

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

我假设“someFunction”调用 dequeue 以保持序列继续进行。

Answer 2

您可以使用承诺 ( 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>