不确定如何实现$ .defered [英] Unsure of how to implement $.defered

问题描述

这应该很简单:我有一个5秒的动画，之后我想添加.append('Done').我想利用延期.我将函数推迟了，添加了一个resolve语句(不带参数，所以我不确定是否需要)，然后让它返回Promise.但是我无法让.append等待我的fader()执行.

This should be simple: I have a 5-second animation, after which I want to .append('Done'). I want to make use of deferrals. I made the function deferred, added a resolve statement (with no argument, so I'm not sure that's needed), and have it returning a promise. But I cannot get the .append to wait for my fader() to execute.

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

});

到目前为止，我没有尝试过对我有用的东西.我在做什么错了?

Nothing I've tried so far is working for me. What am I doing wrong?

推荐答案

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

You can simply obtain a promise from the right-hand end of your animation chain, and respond accordingly with .done().

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

编辑

好的，就目前情况而言，第一个动画开始后，您在问题中的延期问题将立即得到解决.如果您想长期学习，只是为了学习，则仅在fadeOut().fadeIn()动画完成后才需要解析Deferred.

EDIT

OK, as it stands, your Deferred in the question is resolved immediately after the first animation starts. If you want to do it longhand, just for learning, then you need to resolve your Deferred only when the fadeOut().fadeIn() animations have completed.

例如:

$(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返回它，从而避免了所谓的"Deferred anti-pattern":

But this is a bit crazy because creating and resolving your own Deferred is unnecessary when .fadeOut(2500).fadeIn(2500).promise() already generates a resolved promise, which can be returned from fader thus avoiding the socalled "Deferred anti-pattern" :

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

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

This is functionally identical to the solution in my original answer above, but with the jQuery method chain split into two parts :

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

• the first part, $('...').fadeOut(...).fadeIn(...).promise(), inside a function,
• the second part, .done(function() {...}), chained to the function call.

之所以可行，是因为jQuery方法链(涉及或不涉及Promise)始终可以沿其长度在任何位置拆分，并且每个部分的结果都可以从函数返回或分配.

This is possible because a jQuery method chain (involving or not involving promise) can always be split anywhere along its length, with the result of each part either returned from a function or assigned.

这又是分配作业:

var promise = $('#container').fadeOut(2500).fadeIn(2500).promise();

promise.done(function() {
    $('body').append('Done!');
});

或者通过分配执行的延期反模式

Or the Deferred antipattern executed with assignment

var dfr = new $.Deferred();
$('#container').fadeOut(2500).fadeIn(2500).promise().done(dfr.resolve);

var promise = dfr.promise();

promise.done(function() {
    $('body').append('Done!');
});

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

But please understand, I'm not advocating the anti-pattern.

这篇关于不确定如何实现$ .defered的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！