javascript - 为什么以及如何使用 promise() 方法？

Question

考虑下面的代码片段。显示的开始时间和结束时间有何不同？为什么 .promise().done() 没有响应？

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 />");
  });
});

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

Answer 1

what will be the difference between the start and end times displayed?

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

why the .promise().done() isn't responding ?

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

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 />");
  });
});

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