Как сбросить и повторить эту функцию, вызванную кнопкой, нажав эту кнопку еще раз?

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 подразумевает, что каждый раз, когда символ «нажимается», запускается новый таймер. Мой подход заключается в использовании интервального таймера, который просто записывает следующий символ, пока предложение не закончится или машинка не будет сброшена. В этих двух случаях таймер очищается.

Answer 2

если вы выбираете случайную строку, вам нужно написать этот код внутри вашей функции. Пожалуйста, попробуйте приведенное ниже решение.

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

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

<script>

var myArray = ['a', 'b', 'c',]; 

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