不确定如何实现$ .defered

这应该很简单：我有一个5秒的动画，之后我想.append（’完成’）。 我想利用推迟。 我使函数延迟，添加了一个解决语句（没有参数，所以我不确定是否需要），并让它返回一个promise。 但我无法让.append等待我的推子（）执行。

$(document).ready(function () { var fader = function () { var dfr = new $.Deferred(); $('#container').fadeOut(2500).fadeIn(2500); dfr.resolve(); return dfr.promise(); }; /* fader(); $('#container').done(function(){ $('body').append('Done!'); }); */ fader().done(function(){ $('body').append('Done!'); }); }); 

到目前为止我没有尝试过的任何东西都适合我。 我究竟做错了什么？

Answer 1

您可以从动画链的右端简单地获取一个承诺，并使用.done()相应的响应。

 $(document).ready(function () { $('#container').fadeOut(2500).fadeIn(2500).promise().done(function() { $('body').append('Done!'); }); }); 

编辑

好的，就目前而言，问题中的延迟会在第一个动画开始后立即得到解决。 如果你想用手工做，只是为了学习，那么你只需要在fadeOut().fadeIn()动画完成时解决你的Deferred。

例如 ：

 $(document).ready(function () { function fader() { var dfr = new $.Deferred(); $('#container').fadeOut(2500).fadeIn(2500).promise().done(function() { dfr.resolve(); }); //or more concisely // $('#container').fadeOut(2500).fadeIn(2500).promise().done(dfr.resolve); return dfr.promise(); }; fader().done(function() { $('body').append('Done!'); }); ); 

但这有点疯狂，因为当.fadeOut(2500).fadeIn(2500).promise()已经生成一个已解析的promise时，创建和解析你自己的Deferred是不必要的，这可以从fader返回，从而避免所谓的“延迟反 -模式“：

 $(document).ready(function () { function fader() { return $('#container').fadeOut(2500).fadeIn(2500).promise(); }; fader().done(function() { $('body').append('Done!'); }); ); 

这在function上与我上面的原始答案中的解决方案相同，但是jQuery方法链分为两部分：

• 第一部分， $('...').fadeOut(...).fadeIn(...).promise() ，在函数内部，
• 第二部分， .done(function() {...}) ，链接到函数调用。

这是可能的，因为jQuery方法链（涉及或不涉及promise）总是可以在其长度上的任何位置拆分，每个部分的结果可以从函数返回或分配。

这里再次赋值：

 var promise = $('#container').fadeOut(2500).fadeIn(2500).promise(); promise.done(function() { $('body').append('Done!'); }); 

或者使用赋值执行的延迟反模式

 var dfr = new $.Deferred(); $('#container').fadeOut(2500).fadeIn(2500).promise().done(dfr.resolve); var promise = dfr.promise(); promise.done(function() { $('body').append('Done!'); }); 

但请理解，我不是在提倡反模式。