http://blog.getify.com/2010/02/simulated-chaining-in-javascript/

Also, note that $LAB.block() is never a correct pattern, as “block” should never be the first function call in a $LAB chain. I imagine you’re probably doing that because you’re trying to “continue” the previous chain, but unfortunately you’re not doing that, you’re creating a new chain. The above link shows you how you can programatically build up a chain with whatever conditional logic you want, and then simulate the chain with a for-loop, which I imagine will accomplish the goal you have of extending a current chain based on conditional logic. Have a look and lemme know if that helps.

Lastly, note that “block” is now a deprecated API call, replaced with “wait”. The next version of LABjs will not have “block” anymore.

We have the following scenario on our site where we want to combine an “if” statement (in the example below, we’re checking the variable “allowExternalScripts”) with loading in script files. I’ve read your comments on trying to only have one occurence of $LAB in the code but haven’t been able to work out a way to include further script files once an operator has executed as part of the $LAB flow. Do you have any suggestions how this could be refined (ideally 4 & 5 would be combined as I expect initPage could be called before 4 has finished)?

// 1
var postInitPage = function() {

    if (allowExternalScripts) {
        $LAB
        .block()
            .script(document.location.protocol + '//external-file-c.js')
            .script(document.location.protocol + '//external-file-d.js');
    }

}

// 2
function initDom() {

    // initialise DOM elements here

}

// 3
function initPage() {

    $(document).ready(function() {
        initDom();
        postInitPage();
    });

}

// 4
if (allowExternalScripts) {
    $LAB
    .block()
        .script(document.location.protocol + '//external-file-a.js')
        .script(document.location.protocol + '//external-file-b.js');
}

// 5
$LAB
.script(document.location.protocol + '//internal-file-a.js')
    .block()
    .script(document.location.protocol + '//internal-file-b.js')
    .script(document.location.protocol + '//internal-file-c.js')
    .script(document.location.protocol + '//internal-file-d.js')
    .script(document.location.protocol + '//internal-file-e.js')
        .block(function() {
            initPage();
        });

Many thanks
Tom

Here’s this posts sample code, rewritten with my technique:

  var instance = $LAB
  .script("framework.js")
  .script("myscript.js")
  .wait(function(){ myscript.init(); });

  instance.wait(function(){
    framework.init();
    framework.doSomething();
  });

new=>

$LAB
.script("jquery.js")
.block(function(){
      $LAB
      .script("jquery.ui.js")
      .script("myplugin.jquery.js")
      .block(function(){
            $LAB.script("initpage.js");
      });
});

I know its wrong now.
Thank you again

I think I’m clear about it now.

Thanks a lot again!

To try and clarify for you: A single $LAB chain consists of a starting $LAB followed by a chain of one or more .script() calls and .wait() calls, interspersed as you need them to be. You should always try to avoid *multiple* $LAB calls, as they operate completely independently. Also, by nesting a $LAB inside a .wait(), you prevent that chain from even *loading* until the .wait() has executed. By doing a single chain with all your scripts, LABjs can load them *all* in parallel, but control their execution order based on where you have .wait() calls. That’s what .wait() is for, to ensure *execution* order.

As for your $document.ready()… the use of $document.ready() is entirely separate from and orthagonal to the order of your scripts loading. It is only for making sure some logic doesn’t run until the dom is ready. LAB script loads *do not* affect dom readiness at all (they don’t hold it up) so there’s no connection that you should make between sequencing $LAB with document.ready.

Instead, you should load all your scripts with LABjs and use .wait() where it’s most appropriate to run code. If that code happens to be dependent on the dom-readiness, wrap the code (inside your .wait()) with a document.ready. In some cases, your scripts may load and execute before dom-ready, and thus your logic will protected to run later when the dom is ready. In other cases, dom-ready will pass before your scripts load and execute, and using document.ready() will essentially pass through and execute immediately.

If the code you need to wrap in $(document).ready() only cares about jquery, and not about the plugins, then do this:

$LAB
.script("jquery.js")
.wait(function(){
   $(document).ready(function() {  /* do something */ });
})
.script("plugin1.js")
.....

If the code you have to run needs the plugin to be there, then do it this way:

$LAB
.script("jquery.js")
.wait()
.script("plugin1.js")
.wait(function(){
   $(document).ready(function() {  /* do something */ });
});

Does that make sense more now?