Question

这应该很简单：我有一个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()动画完成后才需要解决延迟问题。

例如：

$(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()已经生成已解决的承诺时，创建和解析您自己的Deferred是不必要的，可以从fader返回，从而避免所谓的＆＃34; Deferred anti -pattern＆＃34; ：

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

这在功能上与我上面的原始答案中的解决方案相同，但是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!');
});

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

不确定如何实现$ .deferred

1 个答案:

修改