дождитесь завершения обратного вызова анимации jQuery

Question

У меня есть функция, которая должна вызывать некоторые функции последовательно.Сначала вызывается fadeOut на узле DOM.При обратном вызове узел DOM отключен.Это функция № 1.Но после того, как это сделано, мне нужно вызвать функцию # 2.

Итак:

var func1 = function() {
    console.log('func 1 start');
    elt.fadeOut(2000, callback);
    console.log('func 1 end');
};
var func2 = function() {
    console.log('func 2 start');
    console.log('func 2 end');
};
var callback = function() {
    console.log('func 1 callback start');
    elt.detach();
    console.log('func 1 callback end');
};
func1();
func2();

Вышеуказанные выводы:

func 1 start
func 1 end
func 2 start
func 2 end
func 1 callback start
func 1 callback end

Мне нужен обратный вызов длязакончить до того, как func2() будет вызван.Как мне это сделать?

Рабочий пример здесь: http://jsfiddle.net/y2vj8/2/

[РЕДАКТИРОВАТЬ]:

ОК, кажется, необходимо дать вам некоторое объяснение, почему я хочу func2() вызывается после завершения обратного вызова, иначе я не предвижу скорого получения ответа: (.

func1 выводит div (назовем его div1), а затем отсоединяется от DOM. Этообщедоступная функция.

func2 - это определяемый пользователем обратный вызов определенного события (щелчок по некоторому другому div, скажем, div2). Он может быть неопределенным, но может содержать абсолютно любой код.

При нажатии на div2 вызывается func1(), затем оценивается func2(), а если это функция, также вызывается.

Если пользователь вызывает func1() вручную, func2() никогда не вызывается.

func1 не знает о событии click на div2 и поэтому не может проверить, следует ли вызывать func2 или нет.

Answer 1

Вы могли бы сделать что-то действительно глупое, как это ( jsFiddle ):

var func1 = function(callback) {
    console.log('func 1 start');
    $('#fadeOut').fadeOut(2000, function() { func1_callback(callback) });
    console.log('func 1 end');

};
var func2 = function() {
    console.log('func 2 start');
    console.log('func 2 end');
};
var func1_callback = function(callback) {
    console.log('func 1 callback start');
    $('#fadeOut').detach();
    console.log('func 1 callback end');
    callback.call();
};
func1(func2);

Честно говоря, я бы, наверное, посмотрел на реструктуризацию вашего приложения. Я не понимаю, почему вы делаете это так, как вы делаете.

Answer 2

Поскольку обратный вызов вызывается из нормального потока ( я имею в виду, основываясь на том, когда завершается какое-то другое действие ), вам нужно подключить func2 в этом альтернативном потоке ..

Одним из способов было бы позвонить func2 изнутри callback, и если по какой-то причине это невозможно, вы можете позвонить изнутри func1 следующим образом:

var func1 = function() {
    console.log('func 1 start');
    elt.fadeOut(2000, function(){ callback(); func2(); });
    console.log('func 1 end');
};

---

.прямой ответ на

Мне нужно, чтобы обратный вызов завершился до вызова func2 ().Как мне это сделать?

- это

Вы должны позвонить callback, прежде чем позвонить func2 ..

Answer 3

Вы можете создать упакованную версию метода fadeOut, который запускает пользовательское событие:

var _oldfade = $.fn.fadeOut;
$.fn.fadeOut = function(duration, callback) {  
    var el = $(this);
    return _oldfade.call(this, duration, function() {
        callback();
        el.trigger('fadeOut')
    });
}

, которое вы можете зарегистрировать для обработки:

elt.bind("fadeOut", func2);

Это все еще не яснодля меня, почему вы не можете просто изменить исходный обратный вызов, но это выполняет цель запуска func2 только после завершения первого обратного вызова.

Смотрите демонстрацию здесь (нажмите на div, чтобы начатьисчезновение):

• http://jsfiddle.net/sKhuT/