.each（）完成后调用jQuery函数

Question

在jQuery中，调用（或任何其他类型的迭代回调）完成后，可以调用回调或触发事件。.each()例如，我希望此“淡入淡出”完成$(parentSelect).nextAll().fadeOut(200, function() {    $(this).remove();});在进行一些计算之前，在。之后插入新元素$(parentSelect)。如果现有元素仍然对jQuery可见，并且睡眠/延迟一些任意时间（每个元素200个）似乎最好是一种脆弱的解决方案，那么我的计算是不正确的。我可以轻松地.bind()为事件回调提供必要的逻辑，但是我不确定.trigger()在上述迭代完成之后如何干净地调用。显然，我无法在迭代内调用触发器，因为它将触发多次。在的情况下$.each()，我曾考虑过在data参数的末尾添加一些内容（我会在迭代主体中手动查找），但我不想被迫这样做，所以我希望还有其他一些优雅之处控制有关迭代回调的流程的方法。

Answer 1

var elems = $(parentSelect).nextAll(), count = elems.length;

elems.each( function(i) {

  $(this).fadeOut(200, function() { 

    $(this).remove(); 

    if (!--count) doMyThing();

  });

});

请注意，.each()它本身是同步的 -调用.each()之后的语句仅在.each()调用完成后才执行。但是，在迭代中开始的异步操作.each()当然会以自己的方式继续。这就是这里的问题：淡化元素的调用是由计时器驱动的动画，并且这些动画以自己的速度继续进行。

因此，上面的解决方案可以跟踪淡出了多少个元素。每次调用.fadeOut()都会获取完成回调。当回调函数注意到所有涉及的原始元素都已计入回调时，可以放心地采取所有后续操作，以确保所有衰落都已完成。

这是一个有四年历史的答案（目前为2014年）。一种现代的方法可能涉及使用Deferred / Promise机制，尽管以上内容很简单，并且应该可以正常工作。

Answer 2

可能要晚了，但我认为这段代码行得通...

$blocks.each(function(i, elm) {

 $(elm).fadeOut(200, function() {

  $(elm).remove();

 });

}).promise().done( function(){ alert("All was done"); } );

Answer 3

JavaScript是同步运行的，因此您放置的任何内容each()都不会运行，直到each()完成。

考虑以下测试：

var count = 0;

var array = [];

// populate an array with 1,000,000 entries

for(var i = 0; i < 1000000; i++) {

    array.push(i);

}

// use each to iterate over the array, incrementing count each time

$.each(array, function() {

    count++

});

// the alert won't get called until the 'each' is done

//      as evidenced by the value of count

alert(count);

调用警报时，计数将等于1000000，因为直到each()完成警报才会运行。