JavaScript – Controllable, Multiple jQuery – Callback Hell

Some one asked on StackOverflow about loading few scripts,
where in two or more, a global-variable (a variable under global-scope)
is being rewritten (overridden),

it is usually addressed by requiring different versions of same framework (jQuery 1.7.2, 1.8.3),
or different frameworks that uses same global variable and overriding each other (jQuery, mootools, native DOM – and ‘window.$’ variable).

the problem usually resolved in a bad-way, by timing,
or moving <script> tags one another the other, and writing BIG COMMENTS in the HTML such as “DO NOT MOVE! WILL BREAK PAGE”.

loading scripts asynchronously is a great thing,
but when they share a common resource, issues comes up..

icompile.eladkarako.com__what_is_the_matrix_javascript

trying to avoid DOM’s state of flux, requires some amount of control, literal meaning synchronous (linear “loading && handling”)

entering- “callback hell”.

icompile.eladkarako.com_callback_hell

there is not-much of an elegance in ANYTHING similar to this structure,
no, not even using promises or rewriting the functions outside, (silly reader..).

but points will be given for the most shortest and readable “callback hell” blocks.

code attached,
expand it, modify it as needed,
essentially it will provide a sensible, NOT a page position or time delay related loading,
and cleanup too, which is important.


two options of execution provided,
you can use it like this load(URL, {success:success_function, fail:fail_function, anyway:anyway_function});
– everything is optional (..also, awesome icompile.eladkarako.com_lego)
– success will

(function(window, document, body, empty_function){
  "use strict";

  /* ****** *
   *  lib   *
   * ****** */
  //adds a very useful function to 

OPTION #1 will output something like this:
icompile.eladkarako.com_multiple_jquery_loading_2016-01-22_192538

and you can see the (painful, but necessary) famous waterfall..
icompile.eladkarako.com_multiple_jquery_loading_waterfall_2016-01-22_194838

the better alternative: host your javascript files, make sure to PRE EDIT THEM,
make each of the namespace unique, or specific global-scope target, in short, don’t share a static-resource between asynchronous calls, otherwise you’ll have to sync the calls, do you want to implement threaded-execution lock/sync into JavaScript?

– The correct answer is “nope!” ;)

icompile.eladkarako.com_xzibit_meme__callback_hell