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

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

我得到的错误说：不能调用未定义的方法'承诺'。

我没有显示我的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(); 
    });   
}

来源

2014-02-25 HK1

您已经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; 
}

继承人的codepen：http://codepen.io/krismeister/pen/pvgKj

如果您需要做复杂的动画这样的。 GSAP可能会找到更好的结果。继承人如何错开： http://www.greensock.com/jump-start-js/#stagger

来源

2014-02-25 02:45:32 LessQuesar

那么，为每个循环做一个操作并仍然使用延迟对象需要做些什么？ – HK1

做到这一点http://stackoverflow.com/questions/4143308/jquery-each-including-a-delay-looking-for-clean-code然后确保延迟只在上一次动画完成时调用，请执行以下操作： HTTP：//计算器。com/questions/4006822/last-element-in-each-set – LessQuesar

heres the（TimelineLite）GSAP方式待办事项链接。 http://www.greensock.com/jump-start-js/#timelinelite-syntax它的一个耻辱gsap尚未成为主流。回到闪存日，每个人都使用闪存版tweenmax。 – LessQuesar

尝试使用$.when()代替：

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

来源

2014-02-25 02:15:56 Felix

但是'showStuff（）'没有按没有任何回报。这怎么可能工作？ – jfriend00

已经尝试过多次，然后再试一次。它不起作用。 – HK1

@ HK1你在'showStuff（）'函数中的ajax调用在哪里？ – Felix

你一）需要返回从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(); 
    }); 
}

来源

2014-02-25 07:53:16 Bergi

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

回答

相关问题