Javascript 将随机引号生成器与 typewriter 效果相结合

const quotes = [
  { quote: "Here's a text" },
  { quote: "Here's another one" },
  { quote: "Lorem ipsum bla bla" },
  { quote: "I can do this all day" }
];


const generateQuote = () => {
  let arrayIndex = Math.floor(Math.random() * quotes.length);
  return quotes[arrayIndex].quote;
}

window.addEventListener('DOMContentLoaded', () => {
  const textElement = document.getElementById('quotetxt');
  let tId; // timeout handle
  // Typewriter function
  const typeWriter = (text, i = 0) => {
    if (i < text.length) { // while the counter is less than the length of the string
      textElement.innerHTML = text.substring(0, i + 1); // show next letter
      // call the function with the counter at the next letter
      tId = setTimeout(() => typeWriter(text, i + 1), 100); // Adjust speed by changing timeout
    }
  };

  // Event listener for button
  document.getElementById('generate').addEventListener('click', (e) => {
    clearTimeout(tId); // kill running typewriting
    textElement.textContent = "";
    typeWriter(generateQuote());
  });
  typeWriter(generateQuote()); // initialise
});

<p id="quotetxt"> </p>
<button id="generate">generate</button>