Why and how should the promise() method be used?

Question

Consider the code snippet below. What will be the difference between the start and end times displayed? Why is the .promise().done() not responding?

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?

The time difference will be the length it takes for all the queued animations on the div elements to complete

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

It is. You just don't see the result in your example because the p tags are all hidden when the fadeOut() finishes, hence you cannot see the 'End Time` being output. If you use a different element to display that time it works fine:

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>