jquery .done()中的异步回调函数未执行

Question

为什么给jQuery的回调函数提供异步函数deferred.done()不起作用？即为什么

jqueryObj.fadeTo("slow", 1)
    .promise().done(asyncFunc);

不行,但是

jqueryObj.fadeTo("slow", 1)
    .promise().done(function() {
        asyncFunc();
    );

呢？

(另请注意,jqueryObj.click(asyncFunc) 确实有效.)

---

例:

<h2>Title</h2>
<ul>
  <li>Item</li>
  <li>Item</li>
  ...
</ul>

标题完成淡入后,列表中的每个项目按顺序淡入.淡入淡出时间为20000毫秒,但列表项之间的延迟为250毫秒(因此下一个列表项开始淡入,而前一个列表项仍在进行中).

JS:

var title = $("h2"),
    listItems = $("ul li");

function wait(delay) {
    return new Promise(function(resolve) {
        setTimeout(resolve, delay);
  });
}

async function reveal() {
    for (var i = 0; i < listItems.length; i++) {
        $(listItems[i]).fadeTo(2000, 1);
        await wait(250);
    }
}

title.fadeTo(500, 1)
    //.promise().done(reveal) doesn't work!
    .promise().done(function() {
        reveal();
    });

这是一个显示所需效果的JSFiddle.您可以尝试交换注释掉的行,看看没有任何反应.注释掉的行是您通常期望函数的工作方式

Answer 1

问题是在 jQuery 3 之前，$.Deferred（jQuery Promise api）不符合Promise A+标准。

为了传递对async函数的引用，请使用then()（更标准的 Promise 方法）而不是done()使用 jQuery v3+

title.fadeTo(1000, 1).promise().then(reveal)

工作小提琴