jQuery Deferreds, custom Deffered

by lasha

HTML

<div id="foo">Hello World</div>

CSS

#foo{ border:1px solid red; padding:10px; display:none }

JavaScript

// open your console!

function getData(){
   return $.get('/echo/html/');
}

function showDiv(){
    var dfd = $.Deferred();
    
    $('#foo').fadeIn( 1000, dfd.resolve );
    
    return dfd.promise();
}

$.when( getData(), showDiv() )
    .then(function( ajaxResult ){
        console.log('The animation AND the AJAX request are both done!' + ajaxResult);
        console.log(ajaxResult[2].statusText);

        // ‘ajaxResult’ is the server’s response
    });