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 boxAnimation = new $.Deferred();
boxAnimation.done(function() {
    log("Done");
});
boxAnimation.fail(function() {
    log("Stopped");
});


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


if (stopDone) 
{
    boxAnimation.reject();
}