title: Prevent re-loading of javascript if functions already exist. Otherwise ensure synchronous loading
body: <p>Using JQuery.load(), I change the content of my website's mainWindow to allow the user to switch between tabs. For each tab, there is one or multiple scipts that contain functions that are executed once the tab content is loaded. </p>
  
  <p>Obviously when switching to the tab for the first time, the script has to be fetched from the server and interpreted, but this shouldn't happen if the user switches back to the tab later on. So, to put it short:</p>
  
  <ol>
  <li><p>Load() html</p></li>
  <li><p>make sure javascript functions exist, otherwise load script and interpret it.</p></li>
  <li><p>call a a function on the javascript after the DOM is rebuilt.</p></li>
  </ol>
  
  <p>Step one and two have to be complete before step 3 is performed. </p>
  
  <p>At the moment, I am using nested callbacks to realize this:</p>
  
  <pre><code>function openFirstTab(){
      $("#mainWindow").load("firstTab.php", function(){
          if(typeof(onloadfFirstTab) != "function"){
              jQuery.getScript("assets/js/FirstTab.js", function(){
                  onloadFirstTab();
              });
          }
          else{
              onloadFirstTab();
          }
  
      } );
  
  }
  </code></pre>
  
  <p>but I feel that there should be a better way. </p>