I want do_this_after() to run only once slow_running() has finished. When I click the button the desired result is for 1 to appear then after the SlideUp has finished then 2 should appear.
Unfortunately even my code snippet is erroring(!) but I hope it will help illustrate what I am trying to achieve.
PS I only used slideUp as an example of some code that takes a while to execute, I would like to be able to put any slow running code in slow_running() and use promises (not a callback) to have do_this_after() wait until slow_running() has finished.
I need to support IE.
function slow_running() {
$("#result").append("1<br />");
$('#slow_thing').slideUp('slow');
return true
};
function do_this_after() {
$("#result").append("2<br />");
};
$(document.body).on('click', "#go", function() {
slow_running().then(do_this_after());
});
<div class="alert alert-success" id="slow_thing">
Only once this has gone should 2 appear
</div>
<div id="result"></div>
<hr />
<span class="btn btn-primary" id="go">Promises go!</span>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>