Khi hoạt ảnh, cách gọi lại chỉ khi tất cả các thành phần được thực hiện?

Question

Khi hoạt ảnh trong jQuery, cách thực hành tốt nhất để kích hoạt gọi lại chỉ khi TẤT CẢ các phần tử được tạo hoạt ảnh chứ không phải cho từng phần tử?

Ví dụ:

$('.someElements').fadeOut('fast', function() { 
    // dont do this until ALL elements are done fading 
} 

Answer 1

Đây có thể là một đoạn thử:

var numberOfElements = $('.someElements').length; 

$('.someElements').fadeOut(fast, function() { 
    if(numberOfElements-- > 0) return; 
    alert('call the Fireman!'); 
}); 

Cảnh báo là chỉ là một giữ chỗ để cuối cùng -callback bạn cần phải bắn.

EDIT (cách khác):

Bạn cũng có thể bắt tất cả các yếu tố nhưng không phải là cuối cùng một.

$('.someElements').not(.someElements:last).fadeOut(); 

và sau đó thêm một fadeOut với callback chỉ để Nó

$('.someElements:last').fadeOut(fast, function(){ 
    // do something, it's the end of the world 
}; 

Answer 2

Đây là một câu hỏi lớn, theo jQuery docs:

Nếu nhiều yếu tố đang hoạt hình, điều quan trọng cần lưu ý là khi gọi lại được thực hiện một lần cho mỗi lần xuất hiện yếu tố, không một lần cho toàn bộ hoạt ảnh.

Để làm việc xung quanh giới hạn này, bạn có thể:

• liệt kê tất cả các yếu tố phù hợp với .someElements, và thiết lập một callback riêng biệt cho mỗi một.
• Có biến số count theo dõi tổng số lần gọi lại có.
• Trong callback của bạn, giảm giá trị count cho đến khi nó đạt đến 0.

Khi đếm đến 0, tất cả callbacks được hoàn thành, và bạn sẽ được đảm bảo rằng tất cả các yếu tố này được thực hiện hiệu ứng động. Từ đây, bạn có thể có mã đặc biệt trong callback của bạn mà không bất cứ điều gì bạn cần làm ...

Answer 3

Thêm thông cáo gần đây của jQuery (phiên bản 1.6 và mới hơn) bao gồm các ý tưởng của một promise. Sử dụng chức năng này giúp loại bỏ sự cần thiết cho một workaround. Ví dụ:

// define the animation on many elements 
$('.someElements').fadeOut('fast'); 

// define the promise that is called once all element animations are done 
$('.someElements').promise().done(function() { 
    // put callback actions here 
});