jquery đợi cho nhiều sự kiện hoàn chỉnh

Question

Tôi muốn sử dụng hàm load của jQuery để tải một số nội dung vào một div và tôi cũng muốn gọi hàm animate của jQuery.

$('#div1').load('...', function() { 
    // load complete 
}); 

$('html,body').animate({ 
    ...: ...}, ..., '...', function(){ 
    // animate complete 
}); 

Tôi không muốn chờ đợi cho load để hoàn thành trước khi gọi animate hoặc ngược lại.

Tiếp theo, tôi muốn gọi hàm thứ ba, nhưng tôi không muốn gọi cho đến khi sự kiện hoàn chỉnh cho cả load và animate đã bị kích hoạt.

Tôi làm cách nào để thực hiện việc này?

Answer 1

Âm thanh như một công việc cho Deferred: http://api.jquery.com/category/deferred-object/

var load = $.Deferred(function (dfd) { 
    $('#div1').load(…, dfd.resolve); 
}).promise(); 

var animate = $('html,body').animate(…); 

$.when(load, animate).then(function() { 
    // Do your thing here! 
}); 

Answer 2

Đặt cờ trong LoadComplete và gọi hàm 'allComplete' của riêng bạn. Đặt một cờ khác trong AnimateComplete và gọi cùng chức năng 'allComplete'.

Trong allComplete, bạn kiểm tra xem cả hai cờ đã được đặt chưa. Nếu có, cả hai hàm async đều hoàn thành và bạn có thể gọi hàm thứ ba của mình.

Thay vì đặt cờ (biến riêng biệt), bạn cũng có thể thêm 1 vào bộ đếm chung, theo cách đó, bạn có thể tăng số hàm không đồng bộ để đợi mà không phải đưa thêm biến cờ.

Answer 3

var _loadComplete = false; 
var _animateComplete = false; 

$('#div1').load('...', function() { 
    // load complete 
    _loadComplete = true; 
    checkComplete(); 
}); 

$('html,body').animate({ 
    ...: ...}, ..., '...', function(){ 
    // animate complete 
    _animateComplete = true; 
    checkComplete(); 
}); 

function checkComplete() { 
    if(_loadComplete && _animateComplete) 
     runThirdFunction(); 
}); 

Answer 4

Bạn sẽ phải tiếp tục đếm có bao nhiêu sự kiện của bạn đã hoàn thành, và sau đó sử dụng đó như là một thử nghiệm trong callback của bạn:

var complete = 0; 

$('#div1').load('...', function() { 
    complete++; 
    callback(); 
}); 
$('html,body').animate({ 
    ...: ...}, ..., '...', function(){ 
    complete++; 
    callback(); 
}); 

function callback(){ 
    if (complete < 2) return; 
    // both are complete 
} 

Answer 5

Sử dụng:

$('#div1').queue(function(){ /* do stuff */ }); 

Bằng cách này, bạn có thể xếp hàng các hàm để thực hiện một hàm sau cái kia.