Creating a matrix-like effect where number and letters repeat on webpage?

Question

My goal is as follows: create an html header that constantly iterates through a random array full numbers and letters that makes a "matrix" like effect where the initial word on the html doc looks like some cryptographic loop.

const alphabet = [
  "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",
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
];

let randomIndex = Math.floor(Math.random() * alphabet.length);

hash.addEventListener("mouseover", function (randomIndex) {
  for (i = 0; i < Infinity; i++) {
    let randomItem = alphabet[randomIndex];
  }
  hash.innerHTML = `${randomItem}`;
});

My question is a) how do i replace the newly generated randomItem with the next value that generates and b) is there a way to make it so my pc doesn't crash? lol

Answer 1

requestAnimationFrame is the answer. Turns out the loop was going so fast I couldn't see the changes.