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中选择一个随机字符串，然后开始在“问题”段落中键入它。我想发生的是，再次按下“ next”（在进行打字时或键入完成后），已经键入的文本已被删除，并且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>

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

2 个答案: