title: How to execute a javascript/jquery function only after the completion of another function?
body: <p>I know this is a simple question, but I don't really know how to do it. I'm executing two functions in my code, 'luxboxEngine' and 'fitToScreen', the latter of which requires the completion of the former. How do I tell 'fitToScreen' to only execute after 'luxboxEngine' has completed? Right now I have this, which gets the desired results:</p>
  
  <pre><code>luxboxEngine(self);
  setTimeout(fitToScreen, 1000);
  </code></pre>
  
  <p>...But I know that's not a good solution. I've read about callback functions, but I'm afraid I don't really get what they are / how to incorporate them. Thanks for reading.  </p>
  
  <p>EDIT: So as Sudharsan Sri and Brian McGinity answered below, a callback is the solution. Here's the code I used to get what I need in my program:</p>
  
  <pre><code>    luxboxEngine(self, function () {
         fitToScreen(); 
      });
  </code></pre>
  
  <p>That fires the fitToScreen function after the completion of luxboxEngine.</p>