JSFiddle - React, Tailwind, and code Playground

by Bryson Murray

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div class="elem"></div>
-------------------------------------------------------------------
<br/>
<div id="second" class="clicked"></div>
<br/>
1) <button id="first">click here</button>
<br/>

<div id="promiseTest">
  2) <button>Go</button>
  <p>Ready...</p>
</div>
<br/>
<div id="promiseTest2">
  <button>Go</button>
  <p>Ready...</p>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.elem{
  border: 1px solid black;
  width: 100px;
  padding: 10px;
  margin: 10px;
}

.clicked{
  height: 20px;
  border: 1px solid blue;
  width: 100px;
  padding: 10px;
  margin: 10px;
}

#promiseTest2 div {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 10px;
    display: none;
    background-color: #090;
 }
  </style>

JavaScript

$(".elem").click(function(e, callback) {
    setTimeout(function(){
      alert("Code 1");
			
      if (typeof callback === "function")
         callback();
   }, 1000);
});


//$(".elem").trigger("click", function() {
//    alert("Code 2");
//});

$("#second").click(function(e) {
    setTimeout(function(){
      alert("Second Click Event Fired");
      $('#second').css('background', 'red');
			
   }, 1000);
});

var promise = function() {
    alert('"Click Here" Event Fired');
  	
  	var defer = $.Deferred(),
    filtered = defer.then(function() {
      alert("'then()' Event Fired");
      $("#second").css('background', 'yellow');
      $("#second").click();
    });
 
    defer.resolve();
    filtered.promise().done(function() {
      alert("'done()' Event Fired");
      $("#second").css('background', 'green');
    });
};

$("#first").click(promise);

$( "#promiseTest button" ).on( "click", function() {
  $( "p" ).append( "Started..." );
 
  $(".clicked").each(function( i ) {
    $("#second").css('background', 'yellow');
    $( this ).click().promise().done(function(){
      $("#second").css('background', 'blue');
    });
    //$( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );
  });
 
  $( "#promiseTest div" ).promise().done(function() {
    $("#second").css('background', 'green');
    $( "p" ).append( " Finished! " );
  });
});

$( "#promiseTest2 button" ).on( "click", function() {
  $( "p" ).append( "Started..." );
 
  $( "#promiseTest2 div" ).each(function( i ) {
    $( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );
  });
 
  $( "#promiseTest2 div" ).promise().done(function() {
    $( "p" ).append( " Finished! " );
  });
});