.repeat(interval ,runNow ,callback)

Description: Begin a sequential loop that is triggered by a given interval.

interval – number
the number of milliseconds between each trigger.
runNow – boolean, optional
whether to start the loop immediately for the first time.
Defaults to false.
callback – function(count…), optional
a method that is called once per loop iteration.
All current iteration counts/events (from inner-most to outer-most loop) are passed as arguments.

The beginning context for each loop iteration depends on the usage of .until().


Usage pattern

$('.some').repeat(interval).doThis().overAndOver();
$('.some').repeat(interval).doThis().until(false);
$('.some').repeat(interval,true).doThis().overAndOver();
$('.some').repeat(interval,true).doThis().until(false);
$('.some').repeat(interval).doThis().until(count);

Examples with the interval loop

Example #1: repeated blinking (like in the old days with the deprecated <blink> element)

By using .toggleClass() the CSS class switches from being added and removed after every interval timeout.

In this example the interval timeout is set to 400 milliseconds.

$('.blink').repeat(400).toggleClass('blink');

This is a blinking text.

See also another example for the same task using iterated timeouts instead.


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);

Example #6: iterate all selected elements with a timeout

Here we combine two loops. The outer loop is an open interval loop repeating once per second. The inner loop is a sequential each-loop toggling the CSS class for every selected span element with a timeout after each step.

$('.example span').repeat(1000)
  .each($).toggleClass('bold').wait(50);

This is a sample sentence with some words.


Example #7: clock display with one short blink per second

The whole method chain .text(Date).addClass('blink').wait(100).removeClass('blink') is repeated once per second.

$('.example').repeat(1000,true).text(Date)
  .addClass('blink').wait(100).removeClass('blink');

In this code the object Date is used as a callback function to get a simple example for changing text.


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 #11: change the banner randomly in an interval loop

Given that you have a method which selects any element from the current jQuery set randomly,
e.g.
$.fn.random = function(){ return this.eq(
  Math.floor(Math.random()*this.length)) }
,
then you can use that to build a banner rotator very easily.

In this example there are four different banners. Every 5 seconds another one fades in, randomly chosen.

As we don't want to wait for the animations finishing we use the original version of .fadeIn() and .fadeOut() here.

$('#banners > *').hide().repeat(5000,true)
   .fadeOut(1000).siblings().random().fadeIn(1000)
.until($);

Some banner text?
some more text here

Some other cool stuff?
this is other text

Even different text
this is new text

Attention!
cheaper, cheaper, cheaper…


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