JSFiddle - React, Tailwind, and code Playground

HTML

<div id='box'>
</div>    
    
<div class='debug'>
</div>

CSS

#box {
  width: 100px;
  height: 100px;
  background-color: green;
  display: none;    
}
.debug {
    position: fixed;
    top: 300px;
    width:600px;
    height:300px;
    padding: 10px;
    background-color:black;
    color:green;
}

JavaScript

var stopDone = true;
function log(msg) {
    $(".debug").append(new Date() + " - " + msg + "<br/>");
}

log("Starting");

var possiblyRejectedPromise = new jQuery.Deferred();

var p = $("#box")
  .delay(2000)
  .show("slow")
  .delay(2000)
  .promise()
    .then(function(){ possiblyRejectedPromise.resolve("resolvemessage"); });     // when all the animations are done, call my function.

possiblyRejectedPromise.then(function(){
    log("Done");        
});
if (stopDone) {
  setTimeout(function(){
    possiblyRejectedPromise.reject();           
        }, 1000);
}