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：无法调用未定义的方法'html'

导致此错误的原因是什么？

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或承诺。因此，这将被视为自动解决而不是等待动画。

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

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

jQuery承诺不使用方法html undefined

1 个答案: