jQuery $ .animate() nhiều yếu tố nhưng chỉ gọi lại lửa một lần

Question

Nếu bạn chọn một lớp học hoặc tập hợp các yếu tố để animate với jQuery:

$('.myElems').animate({....}); 

Và sau đó cũng sử dụng chức năng gọi lại, bạn kết thúc với một nhiều cuộc gọi không cần thiết animate().

var i=1; 
$('.myElems').animate({width:'200px'}, 200, function(){ 
    //do something else 
    $('#someOtherElem').animate({opacity:'1'}, 300, function(){   
     if (i>1) console.log('the '+i+'-th waste of resources just finished wasting your resources'); 
     i++; 
    }); 
}); 

Có thể cho rằng đây chỉ là mã xấu và/hoặc thiết kế - nhưng có cái gì tôi có thể làm điều đó cả hai tránh có nhiều animate() cuộc gọi với chỉ một trong số họ sử dụng gọi lại, và có một tải trọng của callbacks không cần thiết thực hiện và vặn vẹo với mã của tôi/hành vi mong đợi? Lý tưởng nhất là tôi chỉ có thể mã một cuộc gọi lại 'dùng một lần' duy nhất sẽ chỉ chạy một lần - nếu không có lẽ đó là một cách hiệu quả để kiểm tra xem một cái gì đó đã được hoạt hình bởi jQuery chưa?

Ví dụ: http://jsfiddle.net/uzSE6/ (cảnh báo - điều này sẽ hiển thị một loạt các hộp cảnh báo).

Answer 1

Bạn có thể sử dụng when như:

$.when($('.myElems').animate({width: 200}, 200)).then(function() { 
    console.log('foo'); 
}); 

http://jsfiddle.net/tyqZq/

Alterna phiên bản te:

$('.myElems').animate({width: 200}, 200).promise().done(function() { 
    console.log('foo'); 
}); 

Answer 2

Bạn có thể tạo một biến để chặn thứ hai + gọi lại ...

var i=1; 
$('.myElems').animate({width:'200px'}, 200, function(){ 
    //do something else 
    $('#someOtherElem').animate({opacity:'1'}, 300, function(){   
     if (i>1) return; 
     else 
     { 
      console.log('the '+i+'-th waste of resources just finished wasting your resources'); 
      i++; 
     } 
    }); 
}); 

này sẽ chỉ bắn một lần như mọi callback tiếp theo sẽ được hủy :)