JSFiddle - React, Tailwind, and code Playground

by Eric Hynds

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/').success(function(){
      console.log('Fires after the AJAX request succeeds');
   });
}

function showDiv(){
    var dfd = $.Deferred();

    dfd.done(function(){
      console.log('Fires after the animation succeeds');
    });
   
    $('#foo').fadeIn( 1000, dfd.resolve );
    
    return dfd.promise();
}

$.when( getData(), showDiv() )
    .then(function( ajaxResult ){
        console.log('Fires after BOTH showDiv() AND the AJAX request succeed!');

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