为什么以及应该如何使用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

会有怎样的开始和结束时间之间的区别显示？

的时间差将是它需要完成

的长度上div元素所有排队的动画为什么.promise（）（）完成没有反应？

它是。在您的示例中您看不到结果，因为当​​完成时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>