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＆gt; = 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

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

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个单独的布尔值，你在这一点上有很多选择。

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

4 个答案: