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

Вы можете сделать так, чтобы все обратные вызовы успеха от каждой анимационной функции увеличивали счетчик и вызывали ту же функцию (ваш callbackMethod).

В callbackMethod вы проверяете, нажал ли счетчик 3, а затем выполняете желаемый код, только если он имеет.

Или работайте в обратном направлении от 3 до 0, или 3 отдельных логических значения, в этот момент у вас есть много вариантов.

Answer 4

Вы можете подсчитывать вызовы функций animate и уменьшать это число в каждом обратном вызове анимации.В обратных вызовах, если все другие анимации завершены, вы вызываете «главный» обратный вызов:

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

});