Execute javascript when another function exists

Question

I am writing two scripts in a web environment where I have no control over the order in which they are loaded. Let's say two scripts are called MyUtil and DoSomething .

MyUtil contains utilities that I will attach to the window object using window.myUtil = myUtil . Then I will call MyUtil methods from DoSomething .

If MyUtil loaded MyUtil , everything will work. If it is loaded second, window.myUtil will be undefined .

How do I change the code in DoSomething (and / or MyUtil) until window.myUtil exists before DoSomething executes its code?

NB: I am using jQuery 1.2.3.

Answer 1

jQuery.Deferred objects provide a very elegant way to do this (I know you are not using jQuery 1.5: I just give you a reason to update ;-) :

Assuming we have two scenarios interacting as shown below:

 // defines utilities var util = util || { loaded: $.Deferred() }; (function(){ $.extend(util, { msg: "Hello!" }); util.loaded.resolve(); })(); 

... and:

 // uses them var util = util || { loaded: $.Deferred() }; util.loaded.then(function(){ alert(util.msg); }); 

... a warning will always be triggered after the first script had the ability to determine its utilities regardless of the order in which they are loaded. This has advantages over setTimeout and event approaches, has several dependencies (using $.when ), doesn’t use polling, and you don’t have to worry about handling the load order explicitly.

The only thing that is gross is that all modules should include:

 var util = util || { loaded: $.Deferred() }; 

... and $.extend() to make sure they use the same pending.

Answer 2

Wait until myUtil is available

You can set a timer using window.setInterval() to wait until window.myUtil is set before trying to use it.

Example

Example: http://jsfiddle.net/CtJ8A/1/

Simulating a situation where window.myUtil added after a script that requires it to be loaded:

 window.setTimeout((function(){ window.myUtil = { utility: function(){ alert('utility has great utility!'); } }; }), 5000); 

Elsewhere on the page:

 // Declaration of function that requires window.myUtil var doSomething = function() { window.myUtil.utility(); } /* * Timer that checks for myUtil every 100 milliseconds * When myUtil does exist, the timer is cleared, and doSomething() is called. * * Alternatively, one could put this timer inside doSomething(). */ var timer = window.setInterval(function(){ if (window.myUtil != undefined) { window.clearInterval(timer); doSomething(); } }, 100); 

Answer 3

I ended up using the trigger in MyUtil, which I am checking in DoSomething. This worked great.

At the end of MyUtil, I added:

 $(document).trigger('myUtilLoaded'); 

At the end of DoSomething, I added:

 if (!(window.myUtil)) { $(document).bind('myUtilLoaded', function(e) { doSomething(); }); } else { doSomething(); } 

Answer 4

You can use the load event.

 $('body').load(function() { window.myUtil.utility(); }); 

Answer 5

Something like this work?

  function function1(callback){ var params={ type: "POST", url: "./ajax/doSomethingSlow.php", data: "", success: function(msg){ callback(msg); }, error: function(){ callback(''); } }; var result=$.ajax(params).responseText; } function1(function(){ //call function2 here: function2(); }); 

Answer 6

You can use dynamic loading to load javascript, but if you also cannot control where the script is located, then I suppose this could be a problem too.

Be that as it may, you would basically pull out the script via ajax or use document.write to insert a new script tag:

 function doSomething(){ if(!window.myUtil){ // method of choice for loading script doSomething(); } else { // normal logic for doSomething } } 

Then in your utility you will need to change it so that it checks the existing window.myUtil before assigning it. How it should look depends on how my utl works - whether it be an instance of an object or a jsut literal set of static functions.

See this link for some methods for actually loading the script source.

Answer 7

You can check window.myUtil , and if it is undefined, handle this. This may mean using setInterval or setTimeout to setTimeout for its existence and when it is detected. Go on.

You can also wait for the load event, but it may be too late.