5

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

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

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

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

  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吗？

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

4

1 回答 1

6

当您使用$.when（我知道，有趣的句子；））时，用于解决承诺的值将作为参数传递给回调函数。即在您的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文档。

我需要promise吗？

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

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

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

如果你有多个 promise，我唯一推荐做的就是把它们放在一个数组中：jQuery $.when() with variable arguments。

于 2013-04-12T11:16:07.940 回答