文本启示效应

Question

如果有人能看一看我的代码并加以改进，我会很高兴的。这是一个动画效果，逐渐显示文本，就像它正在被解码。我不介意它是否可以与jQuery一起运行(如果它更短或更好)。我把它上传到jsbin.com上。这完全取决于效果，而不是加密或解密。

我编写了以下JS代码：

var got,
    chars,
    decrypted = document.getElementById("decoded"),
    encrypted = document.getElementById("encoded");
function change() {
    var randstring = "",
        rslength = chars.length - got.length,
        i;
    for (var x=0;x<rslength;x++) {
        i = Math.floor(Math.random() * chars.length);
        randstring += chars[i];
    }
    if (randstring[0] === chars[got.length]) {
        got += randstring[0];
        decrypted.textContent = got;
    } else {
        encrypted.textContent = randstring;
    }
    if (chars.length > got.length) {
        setTimeout(change, 10);
    } else {
        encrypted.textContent = "";
    }
}
function startdecrypt() {
    chars = decrypted.textContent;
    decrypted.textContent = "";
    got = "";
    setTimeout(change, 10);
}
if (window.addEventListener) {
    window.addEventListener('load', startdecrypt, false); //W3C
} else {
    window.attachEvent('onload', startdecrypt); //IE
}

而这个简短的HTML部分：

<span id="decoded">Enjoy this effect!</span>
<span id="encoded"></span>

Answer 1

var decrypted = document.getElementById("decoded");
var encrypted = document.getElementById("encoded");

function startdecrypt() {
    // Original text, split into an array and reversed (for faster pop())
    var originalText = decrypted.textContent.split('').reverse();
    var decryptedText = "";
    var i = 0;

    decrypted.textContent = "";

    var shuffleInterval = setInterval(function(){

      // Generate random strings. You can modify the generator function range
      // (Math.random()*(to-from+1)+from);
      var shuffledText = '';
      var j = originalText.length;
      while(j--) shuffledText += String.fromCharCode((Math.random()*94+33) | 0);
      // You can also use this generator to use only the remaining letters
      // while(j--) shuffledText += originalText[(Math.random()*j) | 0];

      // On every 10 cycles, remove a character from the original text to the decoded text
      if(i++ % 10 === 0) decryptedText += originalText.pop();

      // Display
      decrypted.textContent = decryptedText;
      encrypted.textContent = shuffledText;

      // Stop when done
      if(!shuffledText.length) clearInterval(shuffleInterval);

    // 50ms looks more dramatic
    },50);
}

if (window.addEventListener) {
    window.addEventListener('load', startdecrypt, false); //W3C
} else {
    window.attachEvent('onload', startdecrypt); //IE
}

变化

• 一切都在一个函数中
• 简化代码
• 使用setInterval而不是setTimeout。这更有效，因为您不每次都创建计时器
• 更戏剧性的添加随机字符串生成器，而不是仅仅是你原来的一组字母。这给下一个字母增加了更多的神秘。
• 除了代码，单空间字体将更加引人注目。它避免了解码文本的来回移动。