.unrepeat()

Description: Stop ongoing repeat loops for the selected elements.
- no parameters -

If multiple elements are used in a .repeat() context and only a subset does .unrepeat() then the invocation chain can still go on with the remaining elements.

Other versions of unrepeat(…)

See also usage of repeat(…)

See also usage of until(…)

Examples with breaking loop repetition

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 #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');
});
​
⇒
*
​