使用 jQuery deferred 链接异步函数答案

【问题标题】：Using jQuery deferred to chain asynchronous functions使用 jQuery deferred 链接异步函数
【发布时间】：2016-08-15 15:00:00
【问题描述】：

我正在尝试使用 jQuery $.Deferred 使用 then 将函数链接在一起。

我已通读文档，很确定我在某处犯了一个愚蠢的错误，但我无法让函数 second 等待 first 完成。

HTML

<ul>

</ul>

JS (jQuery 2.1)

function first () {
    let deferred = $.Deferred();
    setTimeout(function () {  // Any async function.
        $('ul').append('<li>First</li>');
        deferred.resolve();
    }, 500);
    return deferred.promise();
}

function second () {
    let deferred = $.Deferred();
    $('ul').append('<li>Second</li>');
    deferred.resolve();
    return deferred.promise();
}

$(function () {
    $.when(first()).done().then(second());
})

实际上，我想继续链接（因此second 中的承诺也是如此）。

JSFiddle：https://jsfiddle.net/jdb1991/n3aory8c/

有什么想法吗？提前致谢。

【问题讨论】：

标签： jquery jquery-deferred

【解决方案1】：

删除then() 回调中second 函数上的括号()。否则，您将直接执行 second 函数，而不是在 promise 解析时执行。

$.when(first()).done().then(second);

Working example.

【讨论】：

【解决方案2】：

实际上，当您只有一个承诺时，使用$.when() 毫无意义。直接使用.then()即可：

 first().then(second);

而且，对于second，您必须传递函数引用，这意味着您只传递函数名称。如果后面有()，它会立即执行并传递返回结果，而不仅仅是传递稍后可以由.then() 基础架构调用的函数引用。

$.when() 只有在你有多个 promise 并且你想知道它们何时都完成时才真正有用。当你只有一个承诺时，你可以直接在那个承诺上使用.then()。请注意，我切换到 .then()，这是使用 Promise 的 ES6 标准方式（并且受 jQuery 支持），而不是使用 jQuery 特定的 .done()。

【讨论】：