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


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

entering- “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:

and you can see the (painful, but necessary) famous waterfall..

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!” ;)


4Chan API – Cross-Domain Image Fetcher – Usage + Examples

The following example on my GitHub project-page, shows, hopefully a clear way, on how to do some Ajax requests on client side, fetching each of the threads in a board, in which all the posts, and all the image links within, 4chan_api

after fetching the information, a Handlebars-Mustache logicless template is using the aggregated data (images) to build a simple gallery,
which uses jQuery’s lazy-loading, so only images within the close-range of the browser’s VIEWPORT will be fetched from 4Chan (saving their’s data plan).

this is mainly academic, since the 4Chan-API documentation is quite poorly explained..