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

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

这将帮助您完成部分工作:

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