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

？ .promise（）。完了（）が応答していない理由を

時間差が

を完了するためにdiv要素上のすべてのキューに入れられたアニメーションのために要する長さになりますか？

です。​​が終了したときに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>