asyncJS uses a Defer-like queue to keep track of tasks, allowing you to append additional tasks, attaching extra callbacks, and handling error inside callbacks, making it a more versatile and robust solution for complex dependency management.
I use script.js for my last project. I love the idea of lazy loading script, but I'm not a big fan of the laconic coding style and its awkward syntax for nested dependency.
That's why I created
Comparing to script.js and other script loader, the advantages of
- support asynchronous functions (such as AJAX request) with Defer-like
- handle error of the dependency queue
- better looking, chaining syntax
- painlessly add async/sync task current queue (due to Defer-like design)
- better nested dependency management
Just like Promise, requesting AJAX content and loading external scripts are carried out in parallel. When
asyncJS finishes all pending tasks, you could just parse the content and present your content to users with a shorter waiting period.
Read about why asyncJS improves performance (in Chinese) on my blog.
Latest version is 0.7.7
$ npm install async-js
asyncJS yields better performance.
- IE 6+
- Opera 15+
- Safari 5+
- Chrome 30+
- Firefox 3.6.28+
Test might fail in IE < 8, that is testing framework failing, not asyncjs. Examples run fine. However,
ConnectionError is NOT catched in IE.
Inline script evaluation blocks following script, and external script blocks
External script is non-blocking, but inline script evaluation are still blocking.
// this could take quite some time to processvar data = ;;
var data;// q is chain-ablevar q = ;// async evaluate time-consuming computationq;q;q;
then when dealing with strict dependencies
var q = ;q;q;// bootstrap will start to load after jquery is loadedq;q;
Add one or more tasks to the asynchronous loading queue. Returns the queue.
// accepts a single task// accepts multiple tasks// accepts script string// and inline function
add does not guarantee that added function is executed after the previous task. For sequential execution, use async#addSync instead.
When adding asynchronous function, call
resolver.resolve when data is ready.
AsyncQueue#add(fn, name) to add an asynchronous function to the queue and restore its return value in q.data[name].
For URL, text string or synchronous function:
var q = ;q;q
For asynchronous function:
// adding an async functionq;// using returned valuesq
Add blocking tasks.
then guarantee that added function is executed after the previous task.
var q = ;// tasks added by then will be executed when// all previous tasks have been completedq;
then will not block previous callbacks execution, but it will block all following
whenDone functions until
then tasks have finished.
Add callback to execute when all previous tasks are finished.
taskIndex is the index of the last finished task, while
queue is the current loading queue and
error the accumulative errors in execution.
var q = ;q
Manipulate queue/q inside
whenDone might crash the page.
For example, calling
whenDone will cause an infinite loop of re-adding the task after the same task is add and executed, which will eventually bring down the entire page.
In practice, never change the queue/q inside callback. Use
addSync if you would like to add a dependent task.
AsyncJS can be minified with Google Closure Compiler using advanced optimization if externs are provided in compilation. Or it could be minified with UglifyJS2 by
$ npm install$ npm run-script build
$ npm install$ npm test
test/index.html in your browser.
Copyright (c) 2013 Jingwei "John" Liu
Licensed under the MIT license.