title: JS: How to execute a function 1 that called function 2 from function 2?
body: <p>I'm making an animation system for a canvas game. Every time I want to move a player, I use <code>entities[0].moveTo(...)</code>, <code>entities[0]</code> is an object, <code>moveTo()</code> is its method that executes larger <code>animate()</code> function.</p>
  
  <pre><code>var moveTo = function(x,y,d){
      if(x!=0) animate(this,'x',this.coords.x+x*tilescale,d,animation_mode);
      if(y!=0) animate(this,'y',this.coords.y+y*tilescale,d,animation_mode);
  }
  var animate = function(e, prop, val, duration, mode) {
      if(mode){
          var start = new Date().getTime();
          var end = start + duration;
          var current = e["offset"][prop];
          var distance = val - current;
          var step = function() {
              var timestamp = new Date().getTime();
              var progress = Math.min((duration - (end - timestamp)) / duration, 1);
              e["offset"][prop] = current + (distance * progress);
              render();
              if (progress &lt; 1) requestAnimationFrame(step);
              else ## moveTo.onanimationfinished() ##
          };
  
          return step();
      }
      else{
          return;
      }
  };
  </code></pre>
  
  <p>Basically I want a "bumping" animation from two small transforms -- go forward, then go back quick. "go back" part should be shown when "go forward" part is complete. Any way to do this?</p>