Làm thế nào để viết một vòng lặp trong jQuery mà chờ đợi cho mỗi chức năng để hoàn thành trước khi tiếp tục vòng lặp

Question

Xin vui lòng tha thứ cho tôi nếu điều này là một rõ ràng.

Tôi có một số lượng yếu tố không xác định trên một trang mà tôi cần phải lặp lại từng phần một và làm công cụ. Tuy nhiên, tôi cần vòng lặp để tạm dừng cho đến khi các hàm được sử dụng trên các phần tử đã hoàn thành, và sau đó tiếp tục đến lần lặp tiếp theo.

Tôi đã thử làm điều này trong một vòng lặp $ .each, nhưng nó đã tắt các lệnh từ xa đến nhanh chóng và hoàn tất mà không cần đợi chúng hoàn tất.

Bất kỳ ý tưởng nào?

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

Đây là những gì tôi có, rất đơn giản. Tôi nhận hàm wait() từ đây: jquery cookbook site.

Vấn đề là, vòng lặp không chờ - lệnh thực tế hoạt động như dự định, chỉ là tất cả chúng đều biến mất cùng một lúc.

Bất kỳ trợ giúp nào được đánh giá cao, cảm ơn.

EDIT: Sau này được thực thi, tôi có thể muốn sau đó thực hiện các vòng lặp lại, do đó danh sách các elems sẽ nhạt dần in/out một lần nữa trong chuỗi

EDIT2: Đã từ nhận những 1.4.2 jQuery lib, đã sử dụng 1.3.2, do đó có chức năng wait() tùy chỉnh. Bây giờ sử dụng delay() như đã đề cập bởi lobstrosity. Được quản lý để cobble với nhau một cái gì đó gần với những gì tôi cần từ câu trả lời của mình, nhờ lobstrosity :).

Answer 1

Trước hết, jQuery 1,4 thêm delay chức năng, mà tôi giả sử là những gì triển khai chờ đợi tùy chỉnh của bạn đang thực hiện.

Sử dụng độ trễ, bạn có thể sắp xếp giả mạo chức năng của từng phần tử "chờ" trên phần tử trước để hoàn thành bằng cách sử dụng thông số đầu tiên cho mỗi lần gọi lại làm hệ số cho sự chậm trễ. Như thế này:

var duration = 5000; 

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

Vì vậy, phần tử đầu tiên sẽ mờ dần ngay lập tức. Thứ hai sẽ mờ dần sau 5.000 mili giây. Thứ ba sau 10.000 mili giây. Hãy nhớ rằng điều này là giả mạo nó. Mỗi phần tử không thực sự chờ đợi trên phần tử trước đó để kết thúc.

Answer 2

Bạn có thể cần phải gọi chờ đợi trước khi chức năng đầu tiên:

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

Các tùy chọn khác là sử dụng gọi lại.

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

Bằng cách này, fadeOut không bắt đầu cho đến khi hoàn thành.

Answer 3

Vòng lặp chính của bạn bằng cách sử dụng each() sẽ chạy không chậm trễ trên bộ sưu tập các phần tử của bạn. Bạn cần phải xếp hàng các yếu tố này thay thế.

này có thể cần phải chỉnh (và có thể có thể sử dụng hàng đợi jQuery?) Nhưng để chứng minh sử dụng đệ quy để xử lý hàng đợi:

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

Đây là bản trình diễn của solution của tôi.

Điều bạn cần không phải là vòng lặp để xử lý quá trình xử lý. Những gì bạn muốn là chuỗi các cuộc gọi. Có vẻ như có thể có một cách đơn giản hơn nhưng đây là phương pháp bạo lực.

// 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();