Question

我发现了很多关于推迟，承诺，同步运行javascript等问题的问题。我已经尝试了很多东西，但仍然无法使其工作。

编辑以下是对此问题的更多解释。 fetchData有一个例程，它取决于showStuff中的所有代码是否完整。特别是，使用屏幕大小的百分比来创建div，我们需要获得这些div的高度，以便我们可以在其中绘制仪表。在slideDown（）完成之前，fetchData正在运行。请参阅我在下面直接添加的其他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的。

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

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()方法了：

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

推迟功能直到完成几个动画

3 个答案: