Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Async (gallery-async) on cdn

Last Updated: 06/21/12

+ 0 -

Steven Olmsted

YUI Contributor

See 42 more by this user.

Created: 12/1/11
Last CDN Push: 06/20/12
Build Tag: gallery-2012.06.20-20-07
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

This module is a rewrite of gallery-asyncronouscommandqueue. What started as a little utility which fixed a single use case has become a tool that I find myself using frequently. I began noticing certain patterns forming in my code to accomplish certain types of tasks, plus just a lot of boilerplate syntax required to instantiate all these objects. The goal of this rewrite was to make asynchronous command queues feel like a more natural solution to more use cases and to make them require less typing. I've also factored out some less common features and made them plugins.

"Synchronous programming is disrespectful and should not be employed in applications which are used by people." - Douglas Crockford

Asynchronous events are a wonderful tool, especially for web application development. Unfortunately, they can create a couple difficult situations and many developers attempt to avoid them by using synchronous XHR or busy waiting or something worse. Async aims to provide a clean solution for these situations, reducing spaghetti code and putting the developer in control of when things happen.

Any asynchronous event and callback function can be expressed as an AsyncCommand object. It could be an io request, YQL, JSONP, a callback from an animation, a DOM event, a user input dialog or form submit, events from widgets, web sockets, web workers, or anything that uses a callback function.

Async will help you in two ways:

When there are multiple asynchronous events that need to occur in a specific order, instead of nesting callback functions in a confusing, ugly, and not very reusable way, Async helps by allowing you to define a single ordered array of commands. The code can be easily read from top to bottom in order.

When there are multiple asynchronous events that need to occur before the program can continue, but the order of completion is not important, Async helps by executing all of the commands as fast as possible. Especially with multiple io requests, this increases front-end performance by taking advantage of parallel processing on the remote servers, instead of waiting for one response before requesting another.

Entire Async objects can be nested to provide very fine control over the timing of complex event sequences.

Y.Async is a container for any number of Y.AsyncCommand objects. Look up gallery-async-command for more details. Y.Async itself extends Y.AsyncCommand, so Y.Async objects may be nested inside each other.

A Y.Async instance can execute its AsyncCommands in one of two specific modes. The default mode 'queue' will execute the first command, wait for it to complete, then execute the second command, and so on. The other mode 'all' will execute all of the commands as fast as possible, then wait for all of them to complete.

More documentation and examples will be coming soon.

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.06.20-20-07'
}).use('gallery-async', function(Y) {
    // Each command depends on the previous command so they are executed one-by-one in order.
    // For this example, each command is a simple Y.later with a random wait time.
    var result = [];
    Y.Async.runQueue(function (success) {
        Y.later(Math.floor(Math.random() * 1000), null, function () {
            result.push(1);
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 1000), null, function () {
            result.push(result[0] + 2);
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 1000), null, function () {
            result.push(result[1] + 3);
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 1000), null, function () {
            result.push(result[2] + 4);
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 1000), null, function () {
            result.push(result[3] + 5);
            success();
        });
    }).on('complete', function () {
        alert(result[4]);
    });
 
    // Each command is independent and does not rely upon other commands.
    // The commands are all executed immediately.
    // Once all commands have completed, the application continues and has valid
    // data provided by all commands.
    // For this example, each command is a simple Y.later with a random wait time.
    var a, b, c, d, e;
    Y.Async.runAll(function (success) {
        Y.later(Math.floor(Math.random() * 5000), null, function () {
            a = 1;
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 5000), null, function () {
            b = 2;
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 5000), null, function () {
            c = 3;
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 5000), null, function () {
            d = 4;
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 5000), null, function () {
            e = 5;
            success();
        });
    }).on('complete', function () {
        alert(a + b + c + d + e);
    });
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.06.20-20-07'
}).use('gallery-async', function(Y) {
    // Each command depends on the previous command so they are executed one-by-one in order.
    // For this example, each command is a simple Y.later with a random wait time.
    var result = [];
    Y.Async.runQueue(function (success) {
        Y.later(Math.floor(Math.random() * 1000), null, function () {
            result.push(1);
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 1000), null, function () {
            result.push(result[0] + 2);
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 1000), null, function () {
            result.push(result[1] + 3);
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 1000), null, function () {
            result.push(result[2] + 4);
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 1000), null, function () {
            result.push(result[3] + 5);
            success();
        });
    }).on('complete', function () {
        alert(result[4]);
    });

// Each command is independent and does not rely upon other commands.
    // The commands are all executed immediately.
    // Once all commands have completed, the application continues and has valid
    // data provided by all commands.
    // For this example, each command is a simple Y.later with a random wait time.
    var a, b, c, d, e;
    Y.Async.runAll(function (success) {
        Y.later(Math.floor(Math.random() * 5000), null, function () {
            a = 1;
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 5000), null, function () {
            b = 2;
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 5000), null, function () {
            c = 3;
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 5000), null, function () {
            d = 4;
            success();
        });
    }, function (success) {
        Y.later(Math.floor(Math.random() * 5000), null, function () {
            e = 5;
            success();
        });
    }).on('complete', function () {
        alert(a + b + c + d + e);
    });
});