jQuery淡出时间与不同的结果混淆

Question

下面是我在面试中被问到的代码。

在这种情况下，开始时间和结束时间有什么区别？

我发现在这里运行它需要 12 秒，而在 this link 中运行它需要 8 秒。 .!

最令人困惑的是，在每个循环中，控制台打印淡出动画时间增加 2 秒，尽管每个 div 总共完成 2 秒。

谁能详细解释一下这里到底发生了什么？

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

我将尝试在您的代码中解释它：

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

});

根据 cmets，第一个项目会立即淡出，因为 i = 0，然后您还有四 (4) 个 div 和 4 * 2 = 8，因此开始时间和结束时间之间的差异将是八 (8) 秒。

希望对你有帮助！

Answer 2

在这里，你会得到两个用于“控制台”输出的奖励 div（一个在另一个里面......这样就解释了 2 x 2 秒的额外时间

在每个循环中，控制台打印淡出动画时间增加 2 秒，尽管每个 div 总共完成 2 秒。

不，第一个 div 需要 0 秒才能淡出
第二个 div 需要 2 秒才能完全淡出
第三个 div 需要 4 秒才能完全淡出
第四个 div 需要 6 秒才能完全淡出
第五个 div 需要 8 秒才能完全淡出

仔细观察，您会发现它们都以不同的速率同时开始衰减

Answer 3

8 是正确答案。承诺将在 8s 后完成，因为最后一个 div 的最长褪色持续时间是 4*2(s)。 在这个站点上运行的代码 sn-p 有一个错误。它包括另外 2 个不属于您的代码的 div。尝试替换

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

到这里

console.log($(this));

你将能够知道出了什么问题