jQuery - 自定義回調函數

Question

我試圖在某些進程完成執行後執行特定函數。

我的具體例子是指一些動畫的（）之後，我想打電話給另一個函數的方法，但是這個功能應該只被調用一次在動畫（）方法完成處理：

var testObject = { 
    methodOne : function(callbackMethod) { 
     $('#item').animate({ 'paddingLeft' : '20px'}, { duration: 200, queue: false }); 
     $('#item2').animate({ 'paddingLeft' : '30px'}, { duration: 200, queue: false }); 
     $('#item3').animate({ 'paddingLeft' : '40px'}, { duration: 200, queue: false }); 
     testObject.callbackMethod(); 
    }, 
    run : function() { 
     alert('done'); 
    } 
}; 

$(function() { 

     testObject.methodOne(run); 

}); 

任何想法我怎麼能做到這一點？

Answer 1

只要你正在使用jQuery> = 1.5，那麼你應該使用Deferred -Functionality：

var testObject = { 
    methodOne : function($elements, callbackMethod) { 
     $elements.each(function (i) { 
      $(this).animate({ 'paddingLeft' : (10 + (10*i)) + 'px'}, { duration: 200 * i, queue: false }); 
     }); 
     $elements.promise().done(callbackMethod); 
    }, 
    run : function() { 
     $('.wrapper').append('<span>Finished!</span>'); 
    } 
}; 

$(function() { 
    testObject.methodOne($('#item, #item2, #item3'), testObject.run); 
}); 

的jsfiddle這個例子：http://jsfiddle.net/3Z4zu/

一個清潔/重構的版本看起來是這樣的：

var testObject = { 
    methodOne : function($elements, callbackMethod) { 
     $elements.each(function (i) { 
      $(this).animate({ 'paddingLeft' : (10 + (10*i)) + 'px'}, { duration: 200 * i, queue: false }); 
     }); 
     $elements.promise().done(callbackMethod); 
    }, 
    run : function() { 
     $('.wrapper').append('<span>Finished!</span>'); 
    } 
}; 

$(function() { 
    testObject.methodOne($('#item, #item2, #item3'), testObject.run); 
}); 

http://jsfiddle.net/3Z4zu/1/

Answer 2

您可以計算動畫函數調用並在每個動畫回調中減少該數字。在回調，如果所有的其他動畫已經完成，你所說的「大師」回調：

var testObject = { 
    methodOne : function(callbackMethod) { 
     var animationsCount = 3; 
     $('#item').animate({ 'paddingLeft' : '20px'}, { duration: 200, queue: false ,complete : function(){ 
      if(--animationsCount == 0) 
       testObject[callbackMethod](); 
     }}); 
     $('#item2').animate({ 'paddingLeft' : '30px'}, { duration: 200, queue: false ,complete : function(){ 
      if(--animationsCount == 0) 
       testObject[callbackMethod](); 
     }}); 
     $('#item3').animate({ 'paddingLeft' : '40px'}, { duration: 200, queue: false ,complete : function(){ 
      if(--animationsCount == 0) 
       testObject[callbackMethod](); 
     }}); 
    }, 
    run : function() { 
     alert('done'); 
    } 
}; 

$(function() { 

     testObject.methodOne('run'); 

}); 

Answer 3

你可以讓所有的成功回調，從每個動畫功能增加一個計數器和調用相同的功能（你callbackMethod） 。

在callbackMethod，你檢查計數器是否已經命中3，然後只執行你想要的代碼，如果它有。或者從3到0或3個獨立的布爾運算符相反的方式工作，在這一點上，您有很多選擇。

Answer 4

您可以定義自定義事件，當動畫停止，例如被解僱：

$("body").bind("animationsComplete", function() { 
    testObject.completed++; 
    if (testObject.completed == testObject.needToComplete) { 
    testObject.run(); 
    } 
}); 

在你的每一個功能，你應該觸發事件：

var testObject = { 
    needToComplete : 3, 
    completed : 0, 
    methodOne : function(callbackMethod) { 
     $('#item').animate({ 'paddingLeft' : '20px'}, { duration: 200, queue: false ,complete : function(){ 
      trigger("animationsComplete"); 
     }}); 
     $('#item2').animate({ 'paddingLeft' : '30px'}, { duration: 200, queue: false ,complete : function(){ 
      trigger("animationsComplete"); 
     }}); 
     $('#item3').animate({ 'paddingLeft' : '40px'}, { duration: 200, queue: false ,complete : function(){ 
      trigger("animationsComplete"); 
     }}); 
    }, 
    run : function() { 
     alert('done'); 
    } 
}; 

編輯：我明白了我失去了原始代碼的一些功能（定義哪個函數被稱爲回調函數），但我想你基本上知道我想要的是什麼。