Javascript 推迟一个函数，直到几个动画完成

我发现了很多关于延迟、承诺、同步运行javascript等方面的问题，我已经尝试了很多方法，但仍然无法实现

编辑下面是关于这个问题的更多解释。fetchData有一个例程，它依赖于showStuff中的所有代码是否完整。特别是，有一些div是使用屏幕大小的百分比创建的，我们需要得到这些div的高度，这样我们就可以在它们内部绘制量规。在slideDown（）完成之前，fetchData正在运行。请参阅我在下面直接添加的附加console.log代码

我的按钮onClick（）调用showOverlay（）

我得到的错误是：无法调用未定义的方法“promise”

我没有展示我的

fetchData（）

函数，但它基本上使用ajax调用web服务，然后使用Raphael在屏幕上创建仪表。如果在动画完成之前运行fetchData，则仪表将无法正确显示，因为其大小与.gauge div相对

Edit1

下面的两个例子都不起作用。它们都运行时没有错误，但返回得太快

function showOverlay() {
    showStuff().promise().done(function() {
        fetchData();
    });  
}

function showStuff() {
    var def = $.Deferred();
    $("#overlay").fadeIn(200);
    $("#gauges").slideDown(800);
    $(".gauge").each(function() {
        $( this ).show();
    });
    def.resolve();
    return def;
}

也不起作用：

function showOverlay() {
    $.when(showStuff()).done(function() {
           fetchData();
       });
}

function showStuff() {
    $("#overlay").fadeIn(200);
    $("#gauges").slideDown(800);
    $(".gauge").each(function() {
        $( this ).show();
    });         
}

尝试改用：

---

你有两个问题，一个是延迟的，这不是你一个接一个运行动画的方式

这将为您提供部分帮助：

function showStuff() {
  var deferred = $.Deferred();
  $("#overlay").fadeIn(300,function(){
    $("#gauges").slideDown(800,function(){
      $(".gauge").show(); //doing this one after another takes more code.
      deferred.resolve();
    });
  });

  return deferred;
}

这是密码笔：

如果你需要做这样复杂的动画。使用GSAP可能会得到更好的结果。 以下是如何错开： 您a）需要从

showtuff

b）返回某个内容，应直接返回承诺，这样就不需要使用

.promise（）

方法：

function showOverlay() {
    showStuff().done(function() {
        fetchData();
    });  
}

function showStuff() {
    return $("#overlay").fadeIn(200).promise().then(function() {
        return $("#gauges").slideDown(800).promise();
    }).then(function() {
        return $(".gauge").show().promise();
    });
}

---

但是

showtuff（）

不会返回任何内容。这怎么可能起作用呢？我已经试过多次了，只是又试了一次。它不起作用。@HK1在

showtuff（）

函数中，你的ajax调用在哪里？它被称为fetchData（）。证明你的答案对我的情况有效，我会投票支持。那么，如何才能为每个循环执行一个for循环，并且仍然使用一个deferr对象呢？然后执行此操作以确保只在最后一个动画完成时调用deferred对象，执行此操作：以下是（TimeLineite）GSAP链接方式。遗憾的是，gsap没有成为主流。回到flash时代，每个人都使用flash版本的tweenmax。

function showStuff() {
  var deferred = $.Deferred();
  $("#overlay").fadeIn(300,function(){
    $("#gauges").slideDown(800,function(){
      $(".gauge").show(); //doing this one after another takes more code.
      deferred.resolve();
    });
  });

  return deferred;
}

function showOverlay() {
    showStuff().done(function() {
        fetchData();
    });  
}

function showStuff() {
    return $("#overlay").fadeIn(200).promise().then(function() {
        return $("#gauges").slideDown(800).promise();
    }).then(function() {
        return $(".gauge").show().promise();
    });
}