讓jQuery等待一個.each函數在下一行執行之前完成？

Question

我有這樣的：

$("a.fadeout").click(function(event){ 
    event.preventDefault(); 
    var loc = this.href; 

    //Do this first... 
    $($(".faded").get().reverse()).each(function(i) { 
     $(this).delay(i * 100).fadeOut(); 
    }); 

    //And only then do this.. 
    window.location = loc; 

}); 

如何強制fadeouts前的位置變化來完成？如果它只是一個fadeOut（），我會使用它的回調函數，但由於有很多，我無法弄清楚如何去做。

乾杯！ Ben

Answer 1

以下works;

$("a.fadeout").click(function(event){ 
    event.preventDefault(); 

    var loc = this.href; 
    var amount = $($(".faded").get().reverse()).each(function(i) { 
     $(this).delay(i * 100).fadeOut(function() { 
      if (i == amount -1) { 
       window.location = loc; 
      } 
     }); 
    }).length; 
}); 

這是我能想到的最乾淨的方式。我們存儲元素的總量，並檢查回調fadeOut是否是最後一次回調被綁定。如果是，則執行重定向。

Answer 2

我來到翻過了同樣的問題，請看看這個鏈接，它會幫助你設計一個新的回調：http://jquery-howto.blogspot.com/2009/11/create-callback-functions-for-your.html

Answer 3

它可以是：

$("a.fadeout").click(function(event){ 
    event.preventDefault(); 
    var loc = this.href; 
    var list = $($(".faded").get().reverse()); 
    var size = list.length; 
    var count = 0; 
    list.each(function(i) { 
     $(this).delay(i * 100).fadeOut(function() { 
      if (++count == size) { 
       window.location = loc; 
      } 
     }); 
    }); 
}); 

Answer 4

歡迎的事件 - 基於非線性的世界async！

$(this).delay(i * 100)創建新的setTimeout()。這並不會導致整個腳本暫停，否則整個瀏覽器會凍結這段時間。 jQuery提供了一些方法來處理這種問題，但是以這種方式來做這件事是不可能的。每當製作​​時，您都必須進行檢查。

$("a.fadeout").click(function(event){ 
    event.preventDefault(); 
    var loc = this.href, 
     $stack = $(".faded").get().reverse(); 

    //Do this first... 
    $($stack).each(function(i) { 
     $(this).delay(i * 100).fadeOut().queue(function() { 
      if($stack.lenght <= i+1) { 
       window.location = loc; 
      } 
     }); 
    }); 
}); 

在jsFiddle上測試它。