javascript - 推迟函数直到几个动画完成

Question

我发现了很多关于延迟、 promise 、同步运行 javascript 等的问题，并且我已经尝试了很多方法，但仍然无法让它发挥作用。

编辑这是对该问题的更多解释。 fetchData 有一个例程，该例程依赖于 showStuff 内所有代码是否完整。特别是，有些 div 是使用屏幕尺寸的百分比创建的，我们需要获取这些 div 的高度，以便我们可以在其中绘制仪表。 fetchData 在slideDown() 完成之前运行。请参阅我直接在下面添加的附加 console.log 代码。

我的按钮 onClick() 调用 showOverlay()。

function showOverlay() {
    showStuff().promise().done( function() {
        console.log($("#gauge1").height()); //returns -0.5625 or something close
        fetchData(); //ajax call
    });
}

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

我收到的错误是:无法调用未定义的“promise”方法。

我没有展示我的 fetchData() 函数，但它基本上使用 ajax 来调用 Web 服务，然后使用 Raphael 在屏幕上创建仪表。如果 fetchData 在动画完成之前运行，则仪表将无法正确显示，因为它们的大小是相对于 .gauge div 的。

编辑1

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

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();
    });         
}

Answer 1

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

这将为您提供部分帮助:

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;
}

这是代码笔:http://codepen.io/krismeister/pen/pvgKj

如果你需要做这样复杂的动画。您可能会通过 GSAP 找到更好的结果。 以下是如何错开: http://www.greensock.com/jump-start-js/#stagger