javascript custom listener - when element is loaded

Question

I have anonymous function where I wrapped all javascript code inside (main.js). I pass global variable to one of function inside. But the problem is that variable is created after main.js is loaded. I could use jQuery document ready, but I don't want to wait entire document to be loaded.

main.js

(function(){
  function example(){
    alert(globalVariable)
  }
})();

and phtml file that is loaded after

<script>var globalVariable = 'example'</script>

Is there any way to create custom listener and when this is created example() should be forced? Something like that (just as example to show what I need):

main.js

(function(){
  listen(mycustomlistener){
    function example(){
      alert(globalVariable)
    }
  }
})();

phtml file

<script>
var globalVariable = 'example'
create listener(mycustomlistener)
</script>

Answer 1

Where is the trigger that you expect from? Is it triggered by you or from an event or from a change?

If it is listener/observer design u are looking for. You could implement your own or use the one available in backbone.wreqr

http://zen-and-art-of-programming.blogspot.in/2013/12/backbonewreqr-jumpstart.html

Also from the above code even though you create a listener your example function wont be called since it is just a functon declaration inside and not the call ie make it

var eventAggregator = new Backbone.Wreqr.EventAggregator(); 


//Subscribe for the event! 
eventAggregator.on('eventName', function() { 
     (function example(){
         alert(globalVariable)
     })();            //observe the call i ve made here which is absent in urs!!!
}); 


//Raise the event! 
eventAggregator.trigger('eventName');

You could also use jquery observer and observable

https://gist.github.com/addyosmani/1321768

Answer 2

This should help you out in what you want. http://jsbin.com/mugage/1/edit?html,js,output