Я как-то писал о jQuery плагине, который создает запоминающиеся пароли.  Основа его привлекательности кроется в интересном эффекте: новый пароль как бы вычисляется на глазах у зрителя.

Сегодня расскажу, как сделать такой эффект.

Создадим функцию generate, которая будет создавать наш эффект вычисления строки:

    var generate = function(str, result, from, delay) {
    //   Здесь будет наш код
   }

Наша функция принимает четыре пораметра, первые два — обязательные.

str — это та строка, которая будет показана в конце нашей анимации (результат вычислений)

result — это html элемент,  для удобства уже «завернутый» в jQuery объект.

from —  это строка, состоящая из символов, участвующих в нашей анимации. Если не определена, то  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz !'

delay —  это задержка между изменениями. Если не определена, то 100.

Наша функция не будет возвращать никаких значений, а только вносить изменения в текст на экране.

Прежде всего, нам нужна служебная функция, которая «перемешивает» элементы массива:

    var shuffle = function(a) {
        var i, j, x;
        j = void 0;
        x = void 0;
        i = void 0;
        i = a.length;
        while (i) {
          j = Math.floor(Math.random() * i);
          x = a[i - 1];
          a[i - 1] = a[j];
          a[j] = x;
          i -= 1;
        }
      };

Далее нам понадобятся две функции для рекурсии.

    var outerSort = function() {
        var letter, letters, span;
        if (strArray.length === 0) {
          return;
        }
        span = $('').appendTo(result);
        letter = strArray.shift();
        letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz !'.split('');
        if(from) letters = from.split('');
        shuffle(letters);
        innerSort(letters, letter, span);
        outerSort();
      };



      var innerSort = function(letters, letter, span) {
        var x;
        if (!letters || letters.length === 0) {
          return;
        }
        x = letters.shift();
        span.html(x);
        setTimeout((function() {
          if (x === letter) {
            span.addClass('sp-generated');
          } else {
            innerSort(letters, letter, span);
          }
        }), delay);
      };

Функция outerSort использует внешнюю по отношению к ней переменную strArray в которую попадает строка str, но уже в виде массива символов:

    strArray = str.split('');
    outerSort();

Функция забирает первый элемент из массива (при помощи shift), создает для него span=$('<span>').appendTo(result), делает из from массив и перемешивает его с помощью нашей функции shuffle. Затем она передает все это в функцию innerSort и вызывается снова.

Функция innerSort перебирает массив символов с заданным интервалом delay до тех пор, пока не будет совпадения.

Теперь нам осталось вызвать нашу функцию:

    var thanks = $('#thanks');
    thanks.click(function(){
      $(this).empty();
      generate('Thank you a lot!', $(this));
    });

    var pi = $('#pi');
    pi.click(function(){
      $(this).empty();
      generate('3.1415926535', $(this), '0123456789.', 100);
    });

Это работает вот так:

Данный пример можно посмотреть на Codepen

Полный код:

    var generate = function(str, result, from, delay) {
      if(!delay) delay = 50;
          var strArray;

          var shuffle = function(a) {
            var i, j, x;
            j = void 0;
            x = void 0;
            i = void 0;
            i = a.length;
            while (i) {
              j = Math.floor(Math.random() * i);
              x = a[i - 1];
              a[i - 1] = a[j];
              a[j] = x;
              i -= 1;
            }
          };


          var outerSort = function() {
            var letter, letters, span;
            if (strArray.length === 0) {
              return;
            }
            span = $('').appendTo(result);
            letter = strArray.shift();
            letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz !'.split('');
            if(from) letters = from.split('');
            shuffle(letters);
            innerSort(letters, letter, span);
            outerSort();
          };
          var innerSort = function(letters, letter, span) {
            var x;
            if (!letters || letters.length === 0) {
              return;
            }
            x = letters.shift();
            span.html(x);
            setTimeout((function() {
              if (x === letter) {
                span.addClass('sp-generated');
              } else {
                innerSort(letters, letter, span);
              }
            }), delay);
          };

          strArray = str.split('');
          outerSort();
        };

    var thanks = $('#thanks');
    thanks.click(function(){
      $(this).empty();
      generate('Thank you a lot!', $(this));
    });

    var pi = $('#pi');
    pi.click(function(){
      $(this).empty();
      generate('3.1415926535', $(this), '0123456789.', 100);
    });