1.

Consider the below code snippet and assume that there are 5 elements on the page. What is the difference between the start and end times displayed?

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

$( "input" ).on( "click", function() {
$( "p" ).append( "Start: " + getMinsSeconds() + "<br />" );
$( "div" ).each(function( i ) {
$( this ).fadeOut( 1000 * ( i * 2 ) );
});
$( "div" ).promise().done(function() {
$( "p" ).append( "End: " + getMinsSeconds() + "<br />" );
});
});

  • For the above code, the difference between the start and end times will be 10 seconds.

  • This is because .promise() will wait for all <div> animations (here, all fadeOut() calls) to complete, the last one will complete 10 seconds (i.e. 5 * 2 = 10 seconds) after the fadeOut() starts.




Discussion

No Comment Found