0

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>
JohnyFree
  • 1,319
  • 3
  • 22
  • 35

2 Answers2

0

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 i.e 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

wallop
  • 2,510
  • 1
  • 22
  • 39
0

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

PatchGuru
  • 327
  • 2
  • 12
  • "ready" applies the entire DOM document, not just any DOM node. I wrote that I don't want to wait entire document to be ready. – JohnyFree Jul 14 '14 at 10:27
  • "but I don't want to wait entire document to be loaded." You never said you didn't want to wait until the entire DOM document was loaded. You simply specified document. When we're talking about javascript that would be $(document).ready(function() {}); which waits until the entire document loads. $("#input").ready(function() {}); waits until all elements with an id of input are loaded. – PatchGuru Jul 15 '14 at 19:43
  • I also thought that but apparently it is not like that. Read [here](http://stackoverflow.com/questions/5560654/onload-and-jquery-ready-do-they-work-on-any-dom-such-as-table-or-div) – JohnyFree Jul 15 '14 at 20:34
  • That seems to be pretty deprecated than as a jquery feature. $().ready(function() {}); should take the content inside $() and wait until all instances of that are enabled. Not until the entire document is loaded. If so the only viable code to be put inside $() should be $(document).ready(function() {}); – PatchGuru Jul 16 '14 at 11:26