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?

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

Other examples with callbacks

Other examples with chain interruption

Other examples with closed loops

Other examples with inline attached events

Other examples with intervals

Other examples with repeat-loops