Execute JS code after setTimeout() callback completes

Question

I have the following code:

function newGraphic() {
 $.post('./lexiconGraph.pl', {
 'tag' : this.getAttribute('apolo'),
 'apoloKey' : this.id,
 'h' : surface.h,
 'w' : surface.w,
 'operation' : 'newGraphic'
 }, function(result) {
 minGraphic();
 // STOP AND WAIT //
 document.getElementById('container').innerHTML = result;
 getNodes();
 // STOP AND WAIT //
 maxGraphic();
 });
}
function minGraphic() {
 if (z > 0.01) {
 zoom(parseFloat(z - 0.01));
 setTimeout('minGraphic();', 5);
 }
}

The problem is: The function minGraphic creates an "animation effect" of unknown duration (depends on the size of the graph). I need to find a way to make the following lines are executed only when the function minGraphic finished.
Does anyone have any idea how I can do this?

---

NOTE: Put the following lines in the function minGraphic is not an option, since I already use this function elsewhere.

• Adam Jenkins: If you cannot edit the function minGraphic, then providing a solution also appears to be not an option.
• azz: @Adam This is not true. See my answer.
• Adam Jenkins: @DerFlatulator - what answer?
• plalx: @Adam, It was removed after I indicated that it wouldn't be working.
• azz: That's what I get for answering questions way after my bedtime

Answer 1

Use a callback for when the animation is complete. Something like this:

function newGraphic() {
 $.post('./lexiconGraph.pl', {
 'tag' : this.getAttribute('apolo'),
 'apoloKey' : this.id,
 'h' : surface.h,
 'w' : surface.w,
 'operation' : 'newGraphic'
 }, function(result) {
 var afterAnimation = function()
 {
 document.getElementById('container').innerHTML = result;
 getNodes();
 maxGraphic();
 };
 minGraphic(afterAnimation);
 });
}
function minGraphic(cb) {
 if (z > 0.01) {
 zoom(parseFloat(z - 0.01));
 setTimeout(function() { minGraphic(cb); }, 5);
 }
 else
 {
 if(cb) cb();
 }
}

If I'm following correctly, what this will do is trigger the start of miniGraphic, passing in a callback to a function that will execute after the animation is complete (i.e. z is not> 0.01). When that event happens, if a callback (cb) was passed in, it will call that function, thus triggering the next step in the animation.

If you have stuff you need to wait on for the maxGraphic method, then you can adopt the same concept.

Alternatively, if jQuery is available to you, jQuery has built-in ways for post-animation callbacks that you can use. See this documentation

Answer 2

You could use a callback?

function minGraphic(callback) {
 if (z > 0.01) {
 zoom(parseFloat(z - 0.01));
 setTimeout($.proxy(minGraphic, this, callback), 5);
 return;
 }
 callback && callback();
}

Then just call the function like:

minGraphic(function () {
 //complete
});

Note that the callback argument is optionnal to stay backward compatible with previous code not interested in knowing when the operation was completed.