复古文本框问题

Question

我制作了这个函数，它接受一个字符串并将其逐个字母键入 div，然后您单击 div 中的任意位置，它会清除所有文本并开始下一个字符串在一个字母一个字母的数组中（就像一个老的 gameboy 游戏文本框，每当一个角色说话时）。唯一的问题是，如果您在函数完成之前单击 div 输入当前字符串，它不会跳到下一个字符串，它只会清除 div 并继续原来的字母上的字符串在它被切断之前。如果您在输入当前字符串的数组之前单击它，我试图将它带到哪里，它不会使用超时执行任何操作，但它仅将其应用于第一个字符串。所以我试着让它跳到下一个字符串而不是完成当前的字符串，但我认为因为字符串被拆分成一个数组我不能那样做？

基本上只是想把它带到如果你点击 var b 数组中的一个字符串的中间它要么：不做任何事情，跳到显示整个字符串，跳到下一个字符串。

//JavaScript file

var x = "";
var output = document.getElementById('output');
var a = 0;
var b = ["Hello", "My name is Colin", "I am an entry level web developer!"]
var c = b[a];
a++;

function text(x) {
  var x;
  var string = x;
  var stringArray = string.split("");
  var arrayLength = stringArray.length;
  // var arrayFinal = stringArray[stringArray.length - 1]
  var r = 0;

  setInterval(function nextLetter() {
    if (arrayLength > 0) {
      output.innerHTML += stringArray[r]
      r++
      arrayLength--
    }
  }, 50); //end interval

  setTimeout(function() {
    output.onclick = function() {
      output.innerHTML = ""
      text(b[a])
      a++
    }
  }, 50 * arrayLength); //end timeout

} //end function

text(c)

/* Cascading Style Sheet */

* {
  font-size: 16px;
  font-family: "Times New Roman", Times, serif;
}

  <div id="output"></div>

这是练习，所以不胜感激！仍在努力学习语法等基础知识

Answer 1

clearInterval and clearTimeout

你遇到空字符串问题：

function text(x) {
   var stringArray = (typeof x === 'string' || x instanceof String)?x.split(""):[];

最小变化：

//JavaScript file

var output = document.getElementById('output');
var a = 0;
var b = ["Hello", "My name is Colin", "I am an entry level web developer!"]
var c = b[a];
a++;
var tId, iId;
function text(x) {
  var stringArray = (typeof x === 'string' || x instanceof String)?x.split(""):[];
  var arrayLength = stringArray.length;
  // var arrayFinal = stringArray[stringArray.length - 1]
  var r = 0;
  clearInterval(iId);
  iId= setInterval(function nextLetter() {
    if (arrayLength > 0) {
      output.innerHTML += stringArray[r]
      r++
      arrayLength--
    }
  }, 50); //end interval
  clearTimeout(tId);
  tId=setTimeout(function() {
    output.onclick = function() {
      output.innerHTML = ""
      text(b[a])
      a++
    }
  }, 50 * arrayLength); //end timeout

} //end function

text(c)

/* Cascading Style Sheet */

* {
  font-size: 16px;
  font-family: "Times New Roman", Times, serif;
}

<div id="output"></div>

复古文本框问题

Retro text box issue

javascript

arrays

timeout

intervals