jQuery fadeout time confusing with different results

Question

Below is the code i was asked in interview.

What would be the difference between Start & End time in this case?

I found running it here takes 12 seconds, while in this link it takes 8 Seconds..!

And above all the confusion is, in each loop the console prints the fadeout animation time increasing by 2 seconds, though it completes in total 2 seconds for each div.

Can anyone explain in details what's happening here exactly?

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

$("input").on("click", function() {

  $("p").append("Start time: " + getMinsSecs() + "<br />");

  $("div").each(function(i) {
    console.log(1000 * (i * 2));
    $(this).fadeOut(1000 * (i * 2));
  });

  $("div").promise().done(function() {
    $("p").append("End time: " + getMinsSecs() + "<br />");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

<input type="text" id="inp">

Answer 1

in a fiddle here, you get two bonus div's for the "console" output (one inside the other ... so that explains the 2 x 2 second extra time

in each loop the console prints the fadeout animation time increasing by 2 seconds, though it completes in total 2 seconds for each div.

No, first div takes 0 seconds to fade
Second div takes 2 seconds to fade completely
Third div takes 4 seconds to fade completely
Fourth div takes 6 seconds to fade completely
Fifth div takes 8 seconds to fade completely

Look closely and you'll see that they all start fading concurrently, at different rates

Answer 2

8 is the right answer. The promise will be done after 8s because the longest duration of fading is 4*2(s) for the last div. The code snippet run on this site is having a bug. It include 2 more divs that don't belong to your code. Try to replace

console.log(1000 * (i * 2));

to this

console.log($(this));

and you will able to know what is going wrong

Answer 3

I'll try to explain it within your code:

// if there are 5 <div> elements on the page, what will be the difference between the start and end times displayed?

/**
 * This function gets the current date and prints 
 * the minutes and seconds in the following format
 * mm:ss
 */
function getMinsSecs() {
  var dt = new Date();
  return dt.getMinutes() + ":" + dt.getSeconds();
}

/**
 * Here we are adding a click event listener to the
 * input present in the HTML.
 */
$("input").on("click", function() {

  // This line appends to the p present in the HTML
  // the text with the current minutes and seconds (start time)
  // and the a break line.
  $("p").append("Start time: " + getMinsSecs() + "<br />");

  // This line goes through each div present in the HTML fading out each div multiplying it by the i (index).
  $("div").each(function(i) {
      console.log(i);
    console.log(1000 * (i * 2));
    //The fadeout function lasts the amount of milliseconds passed as an argument
    $(this).fadeOut(1000 * (i * 2));
  });

  // This line waits til every function called over
  // the divs end (this is what the promise function does).
  $("div").promise().done(function() {

    // This function is called after all the
    // fadeout calls got executed and prints again
    // the minutes and seconds appending the current minutes
    // and seconds (end time)
    $("p").append("End time: " + getMinsSecs() + "<br />");
  });

});

Based on the comments, the first items gets fade out immediately because i = 0, then you have four (4) divs left and 4 * 2 = 8 so the difference between start and end time would be eight (8) seconds.

I hope it helps!