在setTimeout（）回调完成后执行JS代码

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 .
Does anyone have any idea how I can do this?

---

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

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 (ie 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.