jquery animate方法中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)

现在我的问题是这两者有什么区别?

Answer 1

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

假设你写了go to foo和go to bar函数。JQuery将在第一次开始执行后开始第二个执行，无论第一个是否完成。

所以当你实现promise时，它会等待previous完成。

最后，在你的例子中，complete将在done完成后调用:)。因此，如果你想在动画完成后进行处理，并在第一个技巧完成时再次执行一些技巧，请将其写入complete。

Answer 2

done()在整个jQuery中是全局的，它会基于承诺中所有正在完成的事件触发，不管它们是排队的还是异步的。

查看jquery的承诺: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>

Answer 3

♠♠简短回答:

你写的所有代码在完成(异步或非异步)首先运行，当他们完成后，完成的代码将运行

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

♠详细答案:

完成和完成有两个区别:

1- done具有时间优先级，因此您在done中编写的所有代码(异步或非异步)首先运行，当它们完成时，完成的代码将运行

例如，在下面的代码(jsFiddle)中，我们有一个完成和完成函数的动画，当动画完成时，done函数使div 的background-color为蓝色和complete函数使div 的background-color为红色:

$.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'
                });
        }
      }
    )
  });
})

你可以看到最后的背景色是红色，这是在完整的功能中设置的。

2- done和complete是函数，但complete不能接受任何参数，而done可以有两个参数(来自jQuery文档):

完成

类型:Function(Promise animation, Boolean jumpedToEnd)

当元素上的动画完成时调用的函数(它的Promise对象被解析了)。(版本新增:1.8)

promise animation"是一样的"fx"jQuery动画的原型和"jumpedToEnd"是一个辅助参数，表示如果动画被中断或不成功(它的Promise对象被拒绝)，它会自动跳转到结束