javascript - jQuery promise 不使用方法 html undefined

Question

我有以下标记和脚本:

<div id="output" hidden>
    <img src="ajax-loader.gif" />
</div>
<script src="Scripts/jquery.min.js"></script>
<script>
    var promises = [
        $.getJSON("./MyContacts.js"),
        $("#output").fadeIn("slow"),
            new $.Deferred(function (dfd) {
                setTimeout(dfd.resolve, 5000);
                return dfd.promise;
        })
    ];

    $.when(promises).then(
        function (xhr, faded, timer) {
            faded.html(xhr[0].length + " Contact(s) Found");
        },
        function (xhr, status) {
            $('#output').html("Error retrieving contacts.")
        }
    );
</script>

运行代码时出现错误消息:

UncaughtTypeError: Cannot call method 'html' of undefined

是什么导致了这个错误？

Answer 1

$.when()不期望延迟的 Array，而是将每个延迟作为自己的参数。

由于 Array 本身不是 Deferred，因此它被视为 truthy，自动解析。而且，faded 是 undefined 而不是您选择的 $("#output") 因为 xhr 实际上包含所有内容.

console.log(xhr);
// Array( [jqXHR], [jQuery], [Promise] )

您需要使用 .apply() 将 promises 传递给它:

$.when.apply($, promises).then(/* ... */);

或者，为了将来引用 (ES6)，使用价差:

$.when(...promises).then(/* ... */);

---

另外，请注意 .fadeIn() 不会返回 Deferred 或 promise。因此，这将被视为自动解决而不是等待动画。

但是，正如 Bergi 在评论中提到的，您可以使用 .promise() method为 fx 动画队列创建一个 Promise。

$('#output').fadeIn('slow').promise()