jQuery - 具有自定义回调的函数

Question

一旦某些进程完成执行,我正在尝试执行特定的功能.

我的具体示例引用了许多animate()方法,之后我想调用另一个函数,但是只有在animate()方法完成处理后才能调用此函数:

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/