jQuery动画方法中“done”和“complete”选项有什么区别？

Question

今天我在阅读jQuery .animate()方法的新功能时，遇到了两个选项，我认为它们具有相同的行为。

这些选项是done和complete。根据文档，它们是在动画完成时运行的函数。

complete
Type: Function()
A function to call once the animation is complete.

并且：

done
Type: Function( Promise animation, Boolean jumpedToEnd )
A function to be called when the animation completes (its Promise object is resolved). (version added: 1.8)

现在我的问题是这两者之间的区别是什么？

- Ahmad Badpey

---

done()是一个常见的jQuery方法，可与promises一起使用。由于animate()现在返回一个promise，因此它可以像任何其他promise一样与done()一起使用。您甚至可以使用done()来处理多个动画，以查看它们何时都完成，而另一个是内置于animate()方法中的普通回调。 - adeneo

@adeneo 非常好，但您能给出使用示例吗？ - dewd

这只是一个简单的例子，但当动画完成时，回调函数会被调用。承诺也是同样的情况，当动画完成时，它将被解决，但承诺也可以用于许多其他方式，例如使用$.when()、$.then等方法。-> http://jsfiddle.net/kFvmr/ - adeneo

三个选项“done”、“fail”和“complete”反映了jQuery promise的“.done()”、“.fail()”和“.complete()”方法，而内部实际上就是这样。当成功完成时，触发“done”，在动画未能完成时触发“fail”（文档在这一点上可能需要更好的说明），在任一情况下，在指定了“done”或“fail”之后触发“complete”。 - Beetroot-Beetroot

至少在我注意到还有一个always选项之前，我是这么认为的。这是否与complete同义？文档的这个部分需要进行严肃的改进。不幸的是，我现在没有时间或精力来运行测试。 - Beetroot-Beetroot

@adeneo 我建议您将您的评论添加为答案，这样问题才能得到适当的回答。 - mekwall

Answer 1

JQuery使用Promise，这意味着在完成后，JavaScript可以从Promise转到下一个函数。

比如说，你已经编写了"go to foo"和"go to bar"函数。无论第一个函数是否完成，JQuery都会在第二个函数开始执行之后立即开始执行第二个函数。

因此，当您实现Promise时，它会等待前一个操作完成。

最终，在您的情况下，只有在Done完成后，Complete才会被调用: )。因此，如果您希望在动画完成后进行处理，并在第一个技巧完成后再次进行一些技巧，请在Complete中编写它。

- Alpesh Nakrani

---

晚回答（一年后），需要进行排版，这样读起来很难。 - Tensibai

Answer 2

done()是jQuery中全局的函数，它会在承诺中的所有事件被完成时触发，无论它们是否排队或异步。

请访问jquery网站了解更多关于Promise的信息：jQuery Promise

以下为文档示例：

var effect = function() {
  return $("div").fadeIn(800).delay(1200).fadeOut();
};

$("button").on("click", function() {
  $("p").append(" Started... ");

  $.when(effect()).done(function() {
    $("p").append(" Finished! ");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>

- bizzehdee

---

需要注意的一件重要事情是，done在1.6版本中被引入，而complete用于动画的完成似乎一直存在，只要有动画就会有。因此，无论是动画还是普通回调，promise和done只是更现代、更一致的做事方式。 - Simon_Weaver

Answer 3

♠♠ 简短回答：

你编写的所有代码（异步或非异步）都会先运行，当它们完成后，complete 中的代码才会运行。

你也可以在 done 函数中使用两个参数，而 complete 函数不接受任何参数。

♠♠ 详细回答：

done 和 complete 有两个区别：

1- done 具有时间优先级，因此你编写的所有代码（异步或非异步）都会先运行，当它们完成后，complete 中的代码才会运行。

例如，在以下代码（jsFiddle）中，我们有一个带有 done 和 complete 函数的动画，当动画完成时，done 函数将 div 的背景颜色设置为 blue，而 complete 函数将 div 的背景颜色设置为 red：

$.noConflict();
jQuery(document).ready(function ($) {
    $('#d_1').click(function () {
    $(this).animate
    (
        {
        width: '200px'
      },
      {
        duration: 800,
        complete: function () {
            $(this).css({
                    backgroundColor: 'red'
                });
        },
        done: function () {
            $(this).css({
                    backgroundColor: 'blue'
                });
        }
      }
    )
  });
})

正如您所见，最终的背景颜色是红色的，这是在 complete 函数中设置的。

2- done 和 complete 都是函数，但 complete 无法接受任何参数，而 done 可以有两个参数（来自于jQuery文档）：

done

类型：Function（Promise animation，Boolean jumpedToEnd）

当元素上的动画完成时（其 Promise 对象解析），将调用该函数。（版本添加：1.8）

"promise animation" 是 jQuery 动画的 "fx" 原型，而 "jumpedToEnd" 是辅助参数，它意味着如果动画被中断或不成功（其 Promise 对象被拒绝），它会自动跳到结尾。

- TechDogLover OR kiaNasirzadeh