title: Load one-script-after another
body: <p>I have this simple function which loads <strong>scripts</strong> into the current DOM:</p>
  
  <pre><code>function loadscripts ( async ) {
      if( async === undefined ) {
          async = false;
      }
  
      var scripts = [];
      var _scripts = ['jquery.min.js', 'bootstrap.min.js', 'plugins.js', 'main.js'];
  
      for(var s in _scripts) {
          scripts[s] = document.createElement('script');
          scripts[s].type = 'text/javascript';
          scripts[s].src = _scripts[s];
          scripts[s].async = async;
  
          document.getElementsByTagName('head').appendChild( scripts[s] );
      }
  }
  </code></pre>
  
  <p>They are loaded fine and without no errors. I know there are event handlers when loading scripts programmatically:</p>
  
  <ul>
  <li><strong>onreadystatechange</strong>, and</li>
  <li><strong>onload</strong>, etc</li>
  </ul>
  
  <p>Now I would like to wish to do the following:</p>
  
  <ul>
  <li>Load first script from the array, and when the event handlers are COMPLETE load the next one, and so on (recursively).</li>
  </ul>
  
  <hr>
  
  <p>Sorry, I have not provided the <code>onreadystatechange</code> and <code>onload</code> events in my function.</p>