title: Javascript - make sure one script is done before next is executed
body: <p>I have a webpage where there are a few javascripts that does the following:</p>
  
  <ul>
  <li>Starts a gallery slider</li>
  <li>Starts a responsive image grid</li>
  <li>Scrolls to a specific div based on a hashtag in the URL</li>
  </ul>
  
  <p>The problem is that the page scrolls to the DIV before the other two are done, resulting in an offset I can't possibly know beforehand. So I need to make sure the first two scripts are done and all animations are complete before scrolling to the IDs.</p>
  
  <p>I have researched callbacks, and done a lot of googling. But I'm not sure I understand it all. So I'll need an actual working example. I've tried to separate the scripts into several functions, the way I'd normally do it in vbscript. But I'm just learning javascript, and this is something I really need to understand before moving on I think. </p>
  
  <p>Basically this is what I want to accomplish:</p>
  
  <pre><code>$(function () {
      jQuery(document).ready(function () {
          startSliderAndGrid();
      });
  });
  
  function startSliderAndGrid() {
      //initialize slider
      $('#home-slider').someSliderPlugin();
      $('.simpleslide').someOtherPlugin();
      scrollToID();
  
  }
  
  function scrollToID() {
      if (window.location.hash) {
          var hashtag = window.location.hash;
          $('body').animate({
              scrollTop: $(hashtag).offset().top
          }, 500);
      }
  }
  </code></pre>
  
  <p>So on document.ready I want to start the first function, initialize the plugins, and then move on to scroll to the ID. I've tried using a timeOut function though, and this does work. But I can't predict how long it will take for each system to initialize the plugins. So that's probably not the ideal solution. </p>
  
  <p>Again, sorry if this is really basic (which it probably is), but I need to get this into my head sooner than later :)</p>