JSFiddle - React, Tailwind, and code Playground

JQuery Promises

HTML

<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<div id ="counter">

</div>

JavaScript

$(document).ready(function() {
 

 
 function success(data){
 alert('I am inside success');
 alert(data);
 }
 
 function failure(data){
 
 alert('I am inside failure');
 alert(data);
 }
 
 function always(){
 
 alert('I will always be called')
 }
 
 function demoPromise(){
 		$.when(showPromiseSuccessMagic(true)).then(success, failure).always(always);
    $.when(showPromiseSuccessMagic(false)).then(success, failure).always(always);
 
 
 }
 
 
 function showPromiseSuccessMagic(isSuccess){
 			alert('Inside showPromise');
      var deferred = $.Deferred();
      
      if(isSuccess){
      	setTimeout(function(){
      		alert('Starting countdown now');

          
          for(var counter =0; counter <10; counter ++){
          	$("#counter").append(counter);
            alert(counter);
            if(counter == 9){
            		alert('Now counter will stop and promise will resolve');
								deferred.resolve('Resolved value goes here');
              
            }
          
          }
          
      }
      , 2000);
      }else{
      deferred.reject('Rejected Value goes here');
      }
      
      
     
      return deferred.promise();
      
 }
 
 function showPromiseFailureMagic(){
    var deferred = $.Deferred();
      deferred.reject('Rejected promise');
     return deferred.promise();
 
 }
 
 demoPromise();
 
});