method repetition with loops
Loops in the invocation chain

The sequential repeat loop

In jquery-timing you can insert loops right in your jQuery chain. Any snippet of your invocation chain can be surrounded by .repeat()….until(). The repeat loop can run instantly, or be invoked on intervals or events. There are also several end conditions to decide when the loop has finished. Follow the links on the right side to the corresponding method definitions.

The loops we have talked about so far are running sequential. That means that every new iteration will start only after the previous one ended. Even if you have any delays within your chain it still will keep your code running in a single execution thread.

Chaining the loop context

The .until() method has one option to decide which execution context to use for the next iteration. The current implementation of jquery-timing allows to stay with the initial context when entering the loop or to use the context from the loop's end as new context for the next iteration.

Let's compare these two different concepts with classical code:

var $list = $('ul.list');
$list.append('<li>');
$list.append('<li>');
// … for 20 times
$list.append('<li>');

$('ul.list').repeat().append('<li>').until(20);

In the example above the developer wants to use the same starting context in each iteration.
Now we take another case:

var $elem = $('ul.list > li:first');
$elem = $elem.delay(500).fadeOut().next();
$elem = $elem.delay(1000).fadeOut().next();
// … for 20 times
$elem = $elem.delay(9500).fadeOut().next();
$elem = $elem.delay(10000).fadeOut();

$('ul.list > li:first').repeat()
  .wait(500).fadeOut().next().until($);

Here the developer wanted to let all the items fade out with a timeout between each item. He used .next() to navigate to the next sibling. We can achieve the same thing with ….until($). The loop will automatically end when there is no element left.

The sequential each loop

The last example above can even be shorter when using an each-loop to navigate all elements from a jQuery selection.

$('ul.list > li:first').repeat()
  .wait(500).fadeOut().next().until($);

$('ul.list > li').each($).wait(500).fadeOut().all();

This version of the each-loop is running the code for each element in a sequence. Just wrap your chain snippet into .each($) … .all() to be executed for each element in a sequence.

The parallel each loop

With the concept of the timed invocation there is a new type of loop that has no equivalence in classical JavaScript – the parallel each-loop.

$('#example').find('span').each().wait('click').remove().all().end().before('Done!');

In the example above the parallel loop .each() … .all() executes the sequence .wait('click').remove() for each element in parallel. After all the spawned threads has come to their .all() command the deferred invocation chain continues with further action. Here a text is put before the list.

As the methods run in parallel you can click the elements in any order you like!

Counting loop iterations

All loops are internally counting their iterations and allow those counter variables to be used in several callback methods. The following example demonstrates how to create a 30 x 200 sized html table dynamically. All you need is one callback method creating each cell. The rest is done via a single jQuery chain:

function createCell(x,y) {
    $('<td>').text(x+':'+y).appendTo(this);
}

$.repeat().$('<tr>').repeat(createCell).until(30)
  .appendTo('tbody').until(200);
​

As you can see the loop counter variables are given to the callback function createCell(x,y) as parameters. The arguments are always beginning with the innermost loop and include all loop counts up to the outermost loop.