Call a function after a bunch of other functions are complete

Question

So I've got these functions:

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();
    }
}

And then in my $(document).ready() I've got a bunch of these:

addScript(roofPathMrtu.js);
addScript(roofPathTrtu.js);
addScript(lowerPathMrtu.js);
etc...

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

UrlExists('roofPathMrtu.js');

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.

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.

You're using jQuery, so why do you need to duplicate their [`$.getScript` method](http://api.jquery.com/jquery.getscript)? — zzzzBov, May 14 '13 at 22:26
@zzzzBov Because there are lots of things I have never heard of before :) — dezman, May 14 '13 at 22:27
Also, if you're going to [add a script dynamically, the callback should occur when the script has loaded](http://stackoverflow.com/questions/7718935/load-scripts-asynchronously/7719185#7719185). — zzzzBov, May 14 '13 at 22:28

score 1 · Answer 1 · answered May 14 '13 at 23:50

A way that I have been doing this is not to use the javascript method of setimeout(), but using the jquery feature when. IF not, then I would use a Que. The syntax is

$.when(function()).then(fucntion2());

or

$.when(function1()).done(function2());

You could overlap these if you wanted to, but it is not best when considering both elegant and efficiency in code. Using the que would probably be the next step, using $.when will not accomplish what you want.

http://api.jquery.com/jQuery.when/

score 0 · Answer 2 · answered May 14 '13 at 22:24

Your addScript() function is inserting the tag into the dom and returns immediately. At that point, the browser still needs to fetch the javascript file specified in the src attribute. I suppose that UrlExists() is being called after the execution of the addScript() functions but before the browser has a chance to fetch the javascript files.

score 0 · Answer 3 · answered May 14 '13 at 23:29

use a $.Deferred object to "listen" to the various done events. You might want to combine a few $.Deferred object and use the $.when function to listen for multiple resolved promises http://thiswildorchid.com/jquery-progress-and-promises check out this link it might help. But it sounds like you might need this. It helps a lot with async functions and you should see if it is a good fit for you.

score 0 · Answer 4 · answered May 14 '13 at 23:46

0

What you want to do is define an onload function on the script element. It's not hard, but the implementation starts to look ugly. For the particular problem you're dealing with, I would recommend you look at Require JS.

answered May 14 '13 at 23:46

Nirvana Tikku

4,105
1
20
28

Call a function after a bunch of other functions are complete

4 Answers4