Question

I’m trying to execute a specific function once some processes finished executing.

My specific example refers to a number of animate() methods after which I want to call another function, however this function should only be called once the animate() methods finished processing:

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);

});

Any idea how can I achieve this?

Answer 1

Provided you are using jQuery >= 1.5, then you should use the 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 for this example: http://jsfiddle.net/3Z4zu/

A cleaner/refactored version could look like this:

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/