Call a function after a bunch of other functions are complete
<p>So I've got these functions:</p>

<pre><code>function UrlExists(url){
    $.ajax({
      url: url,
      success: function(data){
        alert('exists');
      }, 
      error: function(data){
        alert('fail');
      }
    });
}
function addScript(filepath, callback){
    if (filepath) {
        var fileref = document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filepath);
        if (typeof fileref!="undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref);
    }
    if (callback) {
        callback();
    }
}
</code></pre>

<p>And then in my <code>$(document).ready()</code> I've got a bunch of these:</p>

<pre><code>addScript(roofPathMrtu.js);
addScript(roofPathTrtu.js);
addScript(lowerPathMrtu.js);
etc...
</code></pre>

<p>Which I then need to check if they were successfully loaded or not, so I call:</p>

<pre><code>UrlExists('roofPathMrtu.js');
</code></pre>

<p>The problem is that this UrlExists function is not working, and I think it's because it is running before all the addScript functions are done.</p>

<p>How can I have my UrlExists function run only after all the addScript functions are done? I was going to use the callback parameter of the addScript function on the last one, but I don't think that is gonna work.</p>
