javascript - javascript的故障效果

Question

我一直在花时间使用 javascript 制作这种故障效果。
故障效果通过循环遍历字母表( alpha or alphaCaps variable )并在某个字母处停止( text variable )起作用，
这是代码:

const text = 'TheThingThatDoesntEndWellWillEndWell'
const alphaCaps = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
const alpha = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
var output = "";
var progress = 0;

function sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date <
    milliseconds);
}

function glitch() {
  while (output != text) {
    var randomNums = Math.floor(Math.random() * alpha.length)
    if (alpha[randomNums] == text[progress] || alphaCaps[randomNums] == text[progress]) {
      output += text[progress];
      document.getElementById("text").innerHTML = `${output}`
      progress++;
      sleep(25);
    } else {
      document.getElementById("text").innerHTML = `${output}${alpha[randomNums]}`
      sleep(25);
    }
  }
}

<h1 id="text"></h1>
<button onclick="glitch()">Glitch Button</button>

问题是当我按下按钮时，它没有显示循环过程。
我试图把 sleep 功能，但它不起作用。
请大家帮帮我好吗...
警告:可能会使您的浏览器崩溃。

Answer 1

你不需要 sleep 。它只是挂起浏览器

按照 Jaromanda X 的建议，调用该函数直到使用 requestAnimationFrame 完成字符串以获得更平滑的更新(由于您的 25 毫秒，我最初使用 setTimeout)

使用比内联事件处理程序推荐的事件监听器

测试字符串的长度而不是字符串。更快

const text = 'The Thing That Doesn\'t End Well Will End Well'
const alphaCaps = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ' ', "'"];

const alpha = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', ' ', "'"];
var output = "";
var progress = 0;
const len = text.length;


function glitch() {
  if (progress >= len) {
    return;
  }  
  var randomNums = Math.floor(Math.random() * alpha.length)
  if (alpha[randomNums] == text[progress] || alphaCaps[randomNums] == text[progress]) {
    output += text[progress];
    document.getElementById("text").innerHTML = `${output}`
    progress++;
  } else {
    document.getElementById("text").innerHTML = `${output}${alpha[randomNums]}`
  }
  requestAnimationFrame(glitch);
}

// just to make it nicer
window.addEventListener("load",function() {
  document.getElementById("but").addEventListener("click",function() {
    this.hidden=true;
    glitch();
  });
})

<h1 id="text"></h1>
<button type="button" id="but">Glitch Button</button>