Strange AUI behaviour

Question

Up until now i assumed a call to AUI would be processed synchronously within the embedding JavaScript. Now I noticed the following behaviour:

    Liferay.on('allPortletsReady',
        function() {
           AUI().use('node', function(A) {
                // (1) --> set some global var here
           });
           // (2) --> use global var here
        }
    );

I expected the execution order (1) (2)

I got (2) (2) (2) (1) (1) (1)

I could live with the triple execution but I can't explain the reverse order.

The problem was easily solved by moving (2) inside the AUI sandbox, but I still wonder...

Answer 1

First of all, .use() is called asynchronously. When calling AUI().use('node', function(A) {...});, the node-module has to be loaded and attached before the the function inside (function(A) {...}) is called.

So what is happening is that while the node-module is being loaded, the code lines after use() are being called, and when the module has been successfully loaded and attached, the function (function(A) {...}) is called.

See the documentation on .use() here: http://yuilibrary.com/yui/docs/yui/#understanding-yuiuse

(AUI is an extension of YUI)

This might also be helpful: Getting started with YUI3 and AlloyUI