async, attribute I have been wondering about how you ensure that the library is loaded before your script finishes downloading and runs.
The solution that I thought of at first was, I guess you just don’t use async on libraries. I wasn’t a huge fan of that solution though and after some more pondering and tinkering I have found a different solution.
when.js is a utility (It’s a single function) that enables you to execute a piece of code when a variable becomes available on the window object. So in the case of jQuery. I could write
script-using-jquery.js using when.js and it would look like this:
when.js will register your given function to call when ever the
$ variable becomes available on the window object. The awesome thing is that I can register any number of functions all waiting for the same object to become available.
when.js will run all of the registered functions when the provided variable becomes available.
If the variable is already available on the window object your function will just get run immediately.
####How does it work#### The code to make it work is only 34 lines including comments. (211 bytes minified and gzipped).
I will run through the major parts to explain how it works.
Everything is wrapped in a self executing function in order to provide closure scope to the when function. This is needed so that between calls to
when, it can maintain a list of callbacks and objects that have been attached to the window object.
Here we need to check to see if the value is undefined. We can’t use
hasOwnProperty because if
when has been called for the same object more than once, the object will already be a property because of the getter and setter, but it may not have a value yet.
callbacks[object] may not have been defined yet, so if it is we just want to reuse it, but if not, we need to make it an array and push the callback on there.
Now here it is important for us to see if the getters and setters have been created already for the object. We don’t want to try to create them more than once.
So here is where the magic happens. We will define a property on the window object with the key of the name of the object. Then we will define a getter and setter.
Lets start with the setter.
The first thing we do is set the given variable in our
whenObjects array. After it is set, we will call all of the callbacks that have been registered up to this point. Then after they have all been called we will set all of the callbacks to null. This way we can conserve some memory as well as prevent the callbacks from being executed again if the given variable is set to a different value.
If you aren’t familiar with how setters work, this
set function will get called when someone does this:
window.varName = "Anything";
Now the getter:
The getter is pretty simple. It just returns the value for the object that was set in the setter.
If you aren’t familiar with how getters work this function would be called whenever the value of the variable is asked for.
var variable = window.varName;
All of the code can be found on github at https://github.com/shichongrui/when.js
In the future I hope to implement when.js with promises so that you could call
when like so:
Or if you required multiple variables to be present: