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 功能：

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

您可以定义一个在动画停止时触发的自定义事件，例如：

$("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');
    }
};

编辑：我知道我丢失了原始代码的一些功能（定义要调用哪个函数作为回调） ）但我想你基本上会知道我的想法。

Answer 3

您可以对动画函数调用进行计数，并在每个动画回调中减少该数字。在回调中，如果所有其他动画都已完成，则调用“主”回调：

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 4

您可以让每个动画函数的所有成功回调增加一个计数器并调用相同的函数（您的callbackMethod）。

在 callbackMethod 中，您检查计数器是否已达到 3，然后仅在达到时执行所需的代码。

或者以相反的方式从 3 到 0，或 3 个独立的布尔值，此时您有很多选择。