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

Question

我发现了很多关于延迟、承诺、同步运行 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

Answer 2

尝试改用$.when()：

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

Answer 3

你a）需要从showStuff返回一些东西b）应该直接返回一个promise，这样.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();
    });
}