Question

我在这里有两个函数，例如animation1和load1，它们的工作原理如下：

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

和

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

有一个点击事件同时触发这两个事件，但是如何告诉load1等到动画1完成动画然后添加newImg元素？我知道我可以将load1回调到animation1的animate（）中，但是我将它们分开，因为我在很多地方重用了animation1。现在发生的事情是，两者都是一起发射的，对眼睛来说并不好看。

谢谢

d

Answer 1

两个选项：

使用回调

我知道你说过

我知道我可以将load1回调到animation1的animate（）中，但是我将它们分开，因为我在很多地方重用了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 docs。

使用计时器

如果您告诉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禁止其他一些设计约束。

Answer 2

你是“在很多地方使用animation1”但是你希望它在功能流方面表现不同？ Souds就像你需要一个单独的函数animation2，它可以包含回调。一般来说，重用是一个很好的想法，但你实际上在这里做了一些不同的事情，因为你是动画，然后是一些东西。

Answer 3

jQuery的animate函数有一个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);
  }
}

然而，这不是非常有效 - load {（）将继续在永久循环中运行，直到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();
    }
  });
}

如何告诉函数等待另一个函数的动画结束

3 个答案:

使用回调

使用计时器