Question

所以我正在玩promises和jQuery，我想出了下面的代码：

var timeoutAsync = function(millis) {
    var deferred = $.Deferred();
    setTimeout(function () { deferred.notify(millis); deferred.resolve(); }, millis);
    return deferred.promise();
};

$(document).ready(function() {
    var firstPromise = timeoutAsync(1000);
    var secondPromise = timeoutAsync(2000);
    var thirdPromise = timeoutAsync(3000);
    var fourthPromise = timeoutAsync(1234);
    $.when(firstPromise, secondPromise, thirdPromise, fourthPromise)
        .done(function() { alert("LOL"); })
        .fail(function() { alert("FAIL"); })
        .progress(function(msg) { console.log(msg); });
});

我希望我的控制台能向我显示四个值，即：1000，1234，2000和3000。当我在setTimeout回调中放入console.log语句时它就这样做了。但是使用上面的代码我得到1000四次。我很确定我在这里遗漏了一些东西，但我似乎无法在文档中找到关于为什么会发生这种情况的暗示。那么为什么会这样呢？

我正在使用jQuery 2.1.1并且我正在测试Firefox，但它也发生在IE中。

Answer 1

这是因为您正在创建四种不同的延迟，并将它们全部传递给$.when。
这会为进度处理程序

创建一组参数

如果你这样做

.progress(function(msg1, msg2, msg3, msg4) { 
     console.log(msg1, msg2, msg3, msg4); 
});

在延迟解决后，您将看到参数

FIDDLE

换句话说，您每次只记录第一个参数，即传递给第一个参数的值。

在检查进度时，您必须使用一个延迟对象，然后使用延迟的通知和进度方法，您不应该创建四个不同的延迟。

像

这样的东西

var timeoutAsync = function(deferred, millis) {
    setTimeout(function () { 
        deferred.notify(millis); 
    }, millis);
};

$(document).ready(function() {
    var deferred = $.Deferred();

    var firstPromise = timeoutAsync(deferred, 1000);
    var secondPromise = timeoutAsync(deferred, 2000);
    var thirdPromise = timeoutAsync(deferred, 3000);
    var fourthPromise = timeoutAsync(deferred, 1234);

    deferred.done(function() { alert("LOL"); })
            .fail(function() { alert("FAIL"); })
            .progress(function(msg) { 
                console.log(msg); 
            });
});

FIDDLE

为什么进度回调每次都会收到相同的值？

1 个答案: