Question

以下代码段按预期工作：

function boxAnimation() {
        var dfd = $.Deferred();
        $('div').fadeIn('slow', dfd.resolve);            
        return dfd.promise();
    }

    $(function () {
        boxAnimation().done(
            function () { $(this).animate({ 'margin-top': 50 }); },
            function () { $(this).animate({ 'margin-left': 150 }); },
            function () { $(this).animate({ 'margin-top': 250 }); },
            function () { $(this).animate({ 'margin-left': 350 }); }
        ).fail(function () { alert('failed'); });
    });

然而，在这一个中，不同的对象既没有被拒绝也没有被解决。

请告诉我哪里出错了。

function boxAnimation() {
        var dfd = $.Deferred();
        var randomNum = Math.floor(Math.random() * 5);
        $('div').fadeIn('slow', function () {
            if (randomNum == 1) {
                dfd.reject;
            }
            else {
                dfd.resolve;
            }
        });            
        return dfd.promise();
    }

    $(function () {
        boxAnimation().done(
            function () { $(this).animate({ 'margin-top': 50 }); },
            function () { $(this).animate({ 'margin-left': 150 }); },
            function () { $(this).animate({ 'margin-top': 250 }); },
            function () { $(this).animate({ 'margin-left': 350 }); }
        ).fail(function () { alert('failed'); });
    });

我的身体是：

<div id='box' style='width:200px; height:200px; border:solid 1px #222222; display:none; background:#cccccc'></div>

Answer 1

你应该调用函数;目前你正在访问它们并使它们保持不变。通过实际调用reject / resolve，您实际上是在拒绝/解决问题。

在第一个示例的fadeIn中，您在没有()的情况下传递了它。这是正确的，因为你应该保持不变。动画完成后，jQuery将在内部调用该函数。

因为在第二个例子中，调用已经在动画完成时执行的函数中，所以你应该在那时调用。

if (randomNum == 1) {
    dfd.reject();      // '()' calls a function
}
else {
    dfd.resolve();
}

其次，在done处理程序中，this是Deferred对象。如果您想传递div，可以在拒绝/解析时传递http://jsfiddle.net/PrmQR/1/。

function boxAnimation() {
    var dfd = $.Deferred();
    var randomNum = Math.floor(Math.random() * 5);
    $('div').fadeIn('slow', function () {
        if (randomNum == 1) {
            dfd.reject(this);    // pass div
        }
        else {
            dfd.resolve(this);
        }
    });            
    return dfd.promise();
}

$(function () {
    boxAnimation().done(
        function (x) { $(x).animate({ 'margin-top': 50 }); },     // x is the div
        function (x) { $(x).animate({ 'margin-left': 150 }); },
        function (x) { $(x).animate({ 'margin-top': 250 }); },
        function (x) { $(x).animate({ 'margin-left': 350 }); }
    ).fail(function () { alert('failed'); });
});

延迟对象混淆

1 个答案: