.until(count ,loopContext)

Description: The end for a repeat loop that finishes after the given number of iterations.
count – number
the number of iterations to run.
Values less than 1 result in a single iteration.
loopContext – boolean, optional
if true then the current jQuery context starts the next loop iteration. Otherwise the original context from the .repeat() call is used for each iteration.
Defaults to false.

Usage pattern

$('.some').repeat().doThis().jQueryStuff().until(count);
 
$('.some').repeat(interval).doThis().until(count);

Other versions of until(…)

See also usage of repeat(…)

See also usage of unrepeat(…)

Examples with loop countdown

Example #4: blinking a given number of times on click

We repeat .toggleClass() for an even number of times, so the class "blink" is absent again when the repeat loop finishes.

Remark that the click handler is assigned directly in the invocation chain using .click($). 

$('.example button').click($).siblings('span')
   .repeat(200).toggleClass('blink').until(4);
⇒

That text blinks two times after clicking .

Example #5: create dynamic tables with instant loops

Imagine you want to add very many table rows automatically so you can fill them with dynamic content.
E.g. a 30 x 200 sized table. Then you need only 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);
​
⇒
My dynamic data:

Example #8: simple progress indicator with text

The text dots will go on and on in this example. Of course in a real use case it would be stopped using .unrepeat(). 

$('.progress').repeat().text('.').repeat(500).append('.').until(20);
⇒

Still processing​

Example #9: generating password with fake progress

Of course generating a random password is done in less than a millisecond. But you want to simulate heavy computational things going on – just for a nice user experience.

Given that you have a method which adds one random character at a time to an input value,
e.g. 
var alphabet = '012345689abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
function addRandomChar() {
  return $(this).val() + alphabet[Math.floor(Math.random() * alphabet.length)];
}
,
then you can use that to build our password generator.
$('button').click($).prev('input').unrepeat()
  .val('').addClass('load').repeat(200)
  .val(addRandomChar).until(10)
  .removeClass('load');
​
⇒

Enter your new password, please:
-

So what happens here?

  • First we interrupt any possibly ongoing password generation by using .unrepeat().
  • We clear the current password value and add a nice animated gif in the background with .val('').addClass('load').
  • Now we repeatedly add a new random character with .repeat(200).val(addRandomChar).
  • After doing so for 10 times we stop and then remove our CSS class with .until(10).removeClass('load').

Try out clicking multiple times on that button. You will see, that the ongoing animation is always stopped before starting over.

Example #18: falling little boxes

This example first creates 25 little boxes with an inline definition: 
$('#boxparent').repeat().append('<div>').until(25)
  .children().hide();

These 25 boxes shall be animated as falling down with each button click.

A helper function is necessary to animate them in reverse order: 
$.fn.reverse = function() {
  return this.$(this.get().reverse());
}

Try clicking on that button multiple times during animation. With .stop(true,true) and .unwait() all animations are reset at the beginning. 

$('button').on('click').fadeTo('slow',0.3)
  .$('#boxparent div').stop(true,true).unwait()
  .css({top:-300}).show().reverse()
  .each($).animate({top:0},500).wait(100).all()
  .wait(500).fadeOut('slow')
  .$('button').wait(200).fadeTo('slow',1);
⇒
​

Example #20: ruler with animation

This example shows how to create a ruler with an animated selection mark.

Each time the user clicks on one of the tick marks the button moves up to this mark. During its animation all underlying ticks get highlighted when the button flies by.

This is the complete code: 

// add ticks to ruler
$('.ruler').repeat().append('<span class="tick">+</span>').until(20);

// define animation
$('.tick').click(function() {
  var $bubble = $(this).siblings('.bubble'),
    dir = $(this).position().left > $bubble.offset().left ? 1 : -1;

  function filter() {
    return dir * ($(this).position().left-$bubble.position().left) >= 0;
  }

  $bubble.stop(true).animate({left: $(this).position().left}, 800)
    .siblings('.tick').unrepeat().filter(filter)
    .repeat(20).not(filter).unrepeat().stop(true)
    .css({backgroundColor:'lime'}).animate({backgroundColor:'white'},'slow');
});
​
⇒
*
​