使用 jquery deferred 同步动画和 ajax

Question

我正在尝试了解整个 deferred 概念，并尝试使用它来同步 fadeIn/fadeOut 动画和 Ajax 调用。

基本上我正在切换页面上的内容：

1. 使用 ajax 获取内容
2. 响应淡出
3. 替换内容
4. 淡入

但是，如果我理解 deferreds 是正确的，我也许可以做这样的事情：

1. fadeOut，同时用ajax初始化Fetch内容
2. fadeOut 和 Fetch 内容都完成时：更改内容
3. 淡入

原解决方案的部分代码：

$.get(url, function(page) {
    $('#content').fadeTo(100, 0, 'linear', function() {
        $(this).html(page.text).fadeTo(400, 1, 'linear');
    });
}

我正在尝试做这样的事情：

var deferred1 = $.get(url);
var deferred2 = $('#content').fadeTo(100, 0, 'linear').promise();

$.when(deferred1, deferred2).done(function() {
    $('#content').html(page.text).fadeTo(400, 1, 'linear');
});

我只是不清楚如何使用它。我应该使用 done 还是 then？我应该以聪明的方式使用管道吗？我需要promise吗？

什么是更“标准化”的实现方式？

Answer 1

当您使用$.when（我知道，有趣的句子；））时，用于解决承诺的值将作为参数传递给回调函数。 IE。在您的 done 回调中，第一个参数引用 deferred1 的解析值，第二个参数引用 deferred2（无论是什么）。

现在，当调用 Ajax 成功回调时，它会传递三个参数：

• 响应
• 状态文本
• jqXHR 对象

你只对第一个感兴趣。

因此，您的设置应该是：

var promise1 = $.get(url);
var promise2 = $('#content').fadeTo(100, 0, 'linear').promise();

$.when(promise1, promise2).done(function(ajax_success) {
    $('#content').html(ajax_success[0]).fadeTo(400, 1, 'linear');
});

还可以查看$.when documentation。

---

我需要promise吗？

没有。当您传递一个 jQuery 集合时，它看起来像 $.when 在内部调用 .promise。但在其他情况下，您必须这样做，因此为了保持一致性，在这里也这样做是有意义的（感谢 Alnitak）。

我应该……吗？我是不是该 ...？会是什么……？

此类问题没有标准解决方案。 Promise 非常灵活，有很多使用方法。我认为它们在 JavaScript 中出现的时间还不够长，无法出现标准模式。查找/创建对您有意义并在您的应用程序中保持一致的内容。

如果您有多个 Promise，我唯一建议您将它们放在一个数组中：jQuery $.when() with variable arguments。