javascript - 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();
    });

Here is a JSFiddle显示出预期的效果。您可以尝试换成注释掉的行，看没有任何反应。注释掉的行是您通常期望函数的工作方式

Answer 1

问题是在 jQuery 3 之前，$.Deferred (jQuery promise api) 不是 Promises A+合规。

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

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

Working fiddle