javascript - 如何通过再次按下该按钮来重置并重复该按钮触发的功能？

Question

我有一个函数，可以从数组中选择一个随机字符串并将其键入段落中。我通过按下按钮来触发此功能。

var myArray = ['something', 'something else', 'another thing',]; 
var rand = myArray[Math.floor(Math.random() * myArray.length)];
var i = 0;      
var speed = 55; 
function typeWriter() {
  if (i < rand.length) {
    document.getElementById("question").innerHTML += rand.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

<button class="button next" id = "next" onclick="typeWriter()"> Next</button>

<p id="question"></p>

按下“下一步”按钮会触发 typeWriter 函数，该函数从 myArray 中选择一个随机字符串并开始在“问题”段落中键入它。我想要发生的是，再次按“下一步”时(无论是在打字过程中还是在打字完成后)，已输入的文本将被删除，并且 typeWriter 再次触发，选择另一个字符串并输入它在“问题”段落中。

Answer 1

你想要这样的东西吗？

var myArray = ['something', 'something else', 'another thing',]; 
var speed = 100;

var target = document.getElementById("question");
var char;
var timer;
var sentence;

function type(){
  if(char < sentence.length) {
    target.innerHTML += sentence.charAt(char++);
  } else {
    clearInterval(timer);
  } 
}

function reset() {
  clearInterval(timer);
  sentence = myArray[Math.floor(Math.random() * myArray.length)];
  char = 0;
  target.innerHTML = '';
}

function typeWriter() {
  reset();  
  timer = setInterval(type, speed);
}

<button class="button next" id = "next" onclick="typeWriter()"> Next</button>

<p id="question"></p>

您使用的setTimeout意味着每次“按下”一个字符时，都会启动一个新的计时器。我的方法是使用间隔计时器，即简单地编写下一个字符，直到句子结束或打字机重置。在这两种情况下，定时器被清零。