如何在繼續循環前等待每個函數完成的jQuery中編寫一個循環

Question

請原諒我，如果這是明顯的問題。

我在頁面上有一個未知數量的元素，我需要一次循環一個元素，然後執行一些操作。但是，我需要循環暫停，直到元素上使用的函數完成，然後繼續下一次迭代。

我試着在$ .each循環中做這件事，但是它很快就解僱了這些命令，並且沒有等待他們完成就完成了。

任何想法？

$('elem').each(function(){ 
    $(this).fadeIn().wait(5000).fadeOut(); 
}); 

這就是我所擁有的，非常簡單。 我從這裏得到了wait（）函數：jquery cookbook site。

問題是，循環doesnt等待 - 實際的命令按預期工作，只是他們都立即熄滅。

任何幫助表示讚賞，謝謝。

編輯：這是執行後，我可能要再次執行循環，使elems的名單將輸入/輸出再次序列

EDIT2淡入：從那以後得到了1.4.2的jQuery lib，使用1.3.2，因此自定義wait（）函數。現在使用延遲（），如大豆所述。 管理湊齊東西接近我需要從他的答案，謝謝龍蝦:)。

Answer 1

首先，jQuery的1.4增加了delay功能，我以爲是什麼您的自定義等待實施正在進行。

使用延遲，可以通過使用每個回調的第一個參數作爲初始延遲的乘數來排序前一個元素上「等待」每個元素的功能。像這樣：

var duration = 5000; 

$('elem').each(function(n) { 
    $(this).delay(n * duration).fadeIn().delay(duration).fadeOut(); 
}); 

所以第一個元素會立即淡入。第二個將在5000毫秒後消失。第三個10000毫秒之後等等。請記住，這是僞造它。每個元素實際上並未等待前一個元素完成。

Answer 2

你可能需要調用的第一個函數之前等待：

$(this).wait().fadeIn().wait(5000).fadeOut(); 

另一種選擇是使用回調。

$(this).wait().fadeIn('slow', function(){$(this).fadeOut('slow')}); 

這樣，fadeOut在fadeIn完成之前不會啓動。

Answer 3

您使用each()的主循環將毫不拖延地運行您的元素集合。您需要將這些元素排隊。

這可能需要調整（並可能使用jQuery隊列？），但使用遞歸處理隊列證明：

function animate(elems) { 
    var elem = elems.shift(); 
    $(elem).fadeIn().wait(5000).fadeOut(2000, function() { 
     if (elems.length) { 
      animate(elems); 
     } 
    }); 
} 

var elems = $('elem'); 
animate(elems); 

Answer 4

下面是我的solution的演示。

你需要的不是一個循環來處理處理。你想要的是連接電話。似乎有可能有一個更簡單的方法，但這裏是一個暴力方法。

// Create a function that does the chaining. 
function fadeNext(x,y) { 
    return function() { x.fadeIn(100).delay(100).fadeOut(1000, (y?y.fadeNext:y)); }; 
} 

// Get all the elements to fade in reverse order. 
var elements = []; 
$('.f').each(function(i,e) {elements.unshift(e);}); 

// Iterate over the elements and configure a fadeNext for each. 
var next; 
for (var i in elements) { 
    var e = $(elements[i]); 
    e.fadeNext = fadeNext(e,next); 
    next = e; 
} 

// Start the fade. 
next.fadeNext();