javascript - 如何使用 JavaScript 创建无限循环的随机播放文本效果？

Question

如何使用下面的代码创建随机播放文本效果的无限循环？

动画结束后停止。

第一个循环动画完成后如何重新开始？

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<div id="container">text</div>

这是主脚本

   (function($) {

    $.fn.shuffleLetters = function(prop) {

        var options = $.extend({
            "step": 10, // How many times should the letters be changed
            "fps": 35, // 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);

   * * Script: * *

  $(function() {

    // container is the DOM element;
    // userText is the textbox

    var container = $("#container")
    userText = $('#userText');

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



    // Leave a 4 second pause

    setTimeout(function() {
        // Shuffle the container with custom text
        container.shuffleLetters({
            "text": "Test it for yourself!"
        });
    }, 1000);

  });

Answer 1

看shuffleLetters插件代码，支持回调。所以如果代码工作正常，应该是这样的:

// Shuffle the contents of container
function loop() {
    container.shuffleLetters({callback:loop});
}
loop();

编辑包括 Yann Bertrand 示例

http://jsfiddle.net/083mxoxp