javascript - Jquery 字母随机播放循环

Question

我正在尝试在我的页面上循环播放这些乱七八糟的句子。

我已经尝试过使用

function loop() {
    container.shuffleLetters({callback:loop});
}

它只循环 html 容器中的第一句话。

但我想要的是，它会在最后一句话完成动画后循环播放。请检查此 fiddle 以获取特定示例。

http://jsfiddle.net/4a0zwfcq/1/

如果你们有任何线索，请使用我的 fiddle 来修复它。感谢您的帮助，谢谢!

Answer 1

你需要同步超时

1. 创建一个文本数组
2. 使用setInterval代替setTimeout
3. 调用单独的函数(此处为shuffle)以使用数组中的元素更新文本
4. 当数组中的所有元素都完成后，调用函数(last) 为最后一个默认文本设置动画。

Demo

/**
 * @name		Shuffle Letters
 * @author		Martin Angelov
 * @version 	1.0
 * @url			http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
 * @license		MIT License
 */

(function($) {

  $.fn.shuffleLetters = function(prop) {

    var options = $.extend({
      "step": 8, // How many times should the letters be changed
      "fps": 25, // Frames Per Second
      "text": "", // Use this text instead of the contents
      "callback": function() {} // Run once the animation is complete
    }, prop)

    return this.each(function() {
      var el = $(this),
        str = "";

      // Preventing parallel animations using a flag;
      if (el.data('animated')) {
        return true;
      }
      el.data('animated', true);

      if (options.text) {
        str = options.text.split('');
      } else {
        str = el.text().split('');
      }

      // The types array holds the type for each character;
      // Letters holds the positions of non-space characters;

      var types = [],
        letters = [];

      // Looping through all the chars of the string

      for (var i = 0; i < str.length; i++) {

        var ch = str[i];

        if (ch == " ") {
          types[i] = "space";
          continue;
        } else if (/[a-z]/.test(ch)) {
          types[i] = "lowerLetter";
        } else if (/[A-Z]/.test(ch)) {
          types[i] = "upperLetter";
        } else {
          types[i] = "symbol";
        }

        letters.push(i);
      }

      el.html("");

      // Self executing named function expression:

      (function shuffle(start) {

        // This code is run options.fps times per second
        // and updates the contents of the page element

        var i,
          len = letters.length,
          strCopy = str.slice(0); // Fresh copy of the string

        if (start > len) {

          // The animation is complete. Updating the
          // flag and triggering the callback;

          el.data('animated', false);
          options.callback(el);
          return;
        }

        // All the work gets done here
        for (i = Math.max(start, 0); i < len; i++) {

          // The start argument and options.step limit
          // the characters we will be working on at once

          if (i < start + options.step) {
            // Generate a random character at thsi position
            strCopy[letters[i]] = randomChar(types[letters[i]]);
          } else {
            strCopy[letters[i]] = "";
          }
        }

        el.text(strCopy.join(""));

        setTimeout(function() {

          shuffle(start + 1);

        }, 1000 / options.fps);

      })(-options.step);


    });
  };

  function randomChar(type) {
    var pool = "";

    if (type == "lowerLetter") {
      pool = "abcdefghijklmnopqrstuvwxyz0123456789";
    } else if (type == "upperLetter") {
      pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    } else if (type == "symbol") {
      pool = ",.?/\\(^)![]{}*&^%$#'\"";
    }

    var arr = pool.split('');
    return arr[Math.floor(Math.random() * arr.length)];
  }

})(jQuery);


$(function() {
  var container = $("#container"),
    userText = $('#userText');

  // Shuffle the contents of container
  container.shuffleLetters();

  // Bind events
  userText.click(function() {
    userText.val("");
  }).bind('keypress', function(e) {
    if (e.keyCode == 13) {
      // The return key was pressed
      container.shuffleLetters({
        "text": userText.val()
      });
      userText.val("");
    }
  }).hide();

  // Leave a 4 second pause

  function last() {
    console.log(container);
    // Shuffle the container with custom text
    container.shuffleLetters({
      "text": "Test it for yourself!"
    });
    userText.val("type anything and hit return..").fadeIn();
  }

  var container = $("#container");

  container.shuffleLetters();

  function shuffle(text) {
    console.log(text);
    // Shuffle the container with custom text
    container.shuffleLetters({
      text: text
    });
  }

  var arr = ['TEXT 1', 'TEXT 2', 'TEXT 3', 'TEXT 4'];
  var i = 0;
  var interval = setInterval(function() {
    shuffle(arr[i++ % arr.length]);
  }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="container">LOAD TEXT</div>