为什么以及如何使用promise（）方法？

Question

考虑下面的代码段。显示的开始和结束时间之间有什么区别？为什么.promise().done()没有回复？

＆＃13;

＆＃13;

function getMinsSecs() {
  var dt = new Date();
  return dt.getMinutes() + ":" + dt.getSeconds();
}

$("#start").on("click", function() {
  $("p").append("Start time: " + getMinsSecs() + "<br />");
  
  $("div").each(function(i) {
    $(this).fadeOut(1000 * (i * 2));
  });
  
  $("div").promise().done(function() {
    $("p").append("End time: " + getMinsSecs() + "<br />");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<button id="start">Start time</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

  

显示的开始时间和结束时间之间的区别是什么？

时差将是div元素上所有排队动画完成所需的时间

  

为什么.promise（）。done（）没有响应？

是的。您只是在示例中看不到结果，因为p标记在fadeOut()完成时全部隐藏，因此您无法看到输出的“结束时间”。如果您使用其他元素来显示该时间，则可以正常工作：

＆＃13;

＆＃13;

function getMinsSecs() {
  var dt = new Date();
  return dt.getMinutes() + ":" + dt.getSeconds();
}

$("#start").on("click", function() {
  $("p").append("Start time: " + getMinsSecs() + "<br />");
  $("div").each(function(i) {
    $(this).fadeOut(1000 * (i * 2));
  });
  $("div").promise().done(function() {
    $("span").append("End time: " + getMinsSecs() + "<br />");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<div><p></p></div>
<button id="start">Start time</button>

<span></span>

＆＃13;

＆＃13;

＆＃13;