как подсказать функции ждать окончания анимации другой функции - PullRequest
Новая
       0

как подсказать функции ждать окончания анимации другой функции

0 голосов
/ 05 января 2012

У меня есть две функции, например, animation1 и load1, они работают следующим образом: 

function animation1() {
    element.animate({width(size)});
}

и 

function load1() {
    element.find('img').after(newImg)
}

есть событие щелчка, которое запускает оба, но как я могу сказатьload1 ждать, пока анимация 1 не закончит анимацию, а затем добавить элемент newImg?Я знаю, что могу вызвать обратный вызов load1 в animate () animation1, но я отделил одно от другого, потому что я многократно использую animation1 во многих местах.Что происходит сейчас, так это то, что оба стреляют вместе, и это не приятно для глаз.

спасибо

d.

Ответы [ 3 ]

1 голос
/ 05 января 2012

Два варианта:

Использовать обратный вызов

Я знаю, что вы сказали

Я знаю, что могу вызвать обратный вызов load1 в animate () animation1, ноЯ отделил одно от другого, потому что я многократно использую animation1.

... но обратный вызов действительно лучший способ сделать это.В местах, где вам не нужен обратный вызов, просто не передавайте его в animation1.

Измените animation1, чтобы принять обратный вызов, который он передает функции animate, которая принимаетобратный вызов «завершения» запускается, когда анимация завершена: 

function animation1(callback) {
    // See also my comment on the question regarding `{width(size)}`
    element.animate({width: size}, callback);
}

... и тогда ваш щелчок будет передавать ссылку на load1 на animation1, а не вызывать его напрямую, как это: 

function clickHandler() {
    animation1(load1);
}

Подробнее о функции завершения см. В animate документах .

Использование таймера

Если вы скажете animation1Точно так же, как долго, вы можете использовать setTimeout, чтобы отложить ваш звонок на load1: 

function animation1(duration) {
    // See also my comment on the question regarding `{width(size)}`
    element.animate({width: size}, duration);
}

... и тогда ваш клик будет переходить на animation1 и использовать setTimeout чтобы задержать вызов load на ту же сумму: 

function clickHandler() {
    animation1(400);
    setTimeout(load1, 400);
}

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

0 голосов
/ 05 января 2012

Функция animate jQuery имеет функцию callback, которую вы можете использовать для этого. Вы можете использовать его по-разному. В приведенном вами примере проще всего использовать глобальную переменную: 

var isAnimating = false;

function animation1(){
  isAnimating = true;
  element.animate({width(size)}, function(){ isAnimating=false; });
}

function load1(){
  if(isAnimating){
    load1(); // call again
  }
  else {
    element.find('img').after(newImg);
  }
}

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

function animate1(){
  element.animate({width(size)}, function() { load1(); });
}

function load1(){
  element.find('img').after(newImg);
}

Это может быть расширено, если вам нужно вызывать различные функции для каждого ... 

function animate1(callback){
  element.animate({width(size)}, function() {
    var fn = window[callback];
    if(typeof fn === 'function') {
      fn();
    }
  });
}
0 голосов
/ 05 января 2012

Вы «используете animation1 во многих местах», но хотите, чтобы он вел себя по-разному с точки зрения потока функций? Похоже, вам нужна отдельная функция animation2, которая может включать обратный вызов. В общем, повторное использование - отличная идея, но вы на самом деле делаете здесь что-то другое, потому что вы анимируете И ТОГДА что-то.

...