Javascript 数组中的字符串在HTML中不显示为字符串

首先，我的HTML：

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

<input id="input" />

<button onclick="fill()">Fill</button>

填满

然后我的Javascript：

function fill() {
    var x = document.getElementById('input').value;
    var y = x.split('');
    for (var i = 0; i < y.length; i++) {
        if (i == 0) {
            setTimeout(function() {
                document.getElementById('p').innerHTML = y[i];
            },(i * 50));
        }

        setTimeout(function() {
            document.getElementById('p').innerHTML += y[i];
        },(i * 50));
    }
}

函数填充（）{
var x=document.getElementById（'input'）。值；
变量y=x.分割（“”）；
对于（变量i=0；i

它所做的是从文本字段中提取文本，将每个字符（包括空格）剪切成一个数组，然后在数组中循环，以50毫秒的间隔显示每个字符。这个效果看起来就像是在打字

效果很好，但数组的值似乎不正确。如果我输入“abc123”，那么我希望它会立即返回，但我得到：

未定义未定义未定义未定义未定义未定义未定义未定义

使用

console.log（）

，当我检查数组时，它看起来很好，当我检查单个数组值的

typeof

时，我得到

string

，但当我检查数组的

typeof

时，我得到

对象。也许这就是破坏它的原因

我试过在刚刚弹出“[object Window]”的
y[I]
上使用
toString（）
，我试过这样定义数组
var y=new array然后执行
split（）
，没有任何效果。我完全不知所措。我真的很想在这里得到帮助。谢谢
 通过调用setTimeout，您正在安排将来发生的事情。当您使用
setTimeout
延迟的函数执行时，循环已经一直执行，
i
现在等于
y.length
。因此，如果在函数执行时输入
test
，它会尝试将
y[4]
添加为
未定义的字母。要修复它，您可以执行以下操作：


函数填充（）{
var x=document.getElementById（'input'）。值；
变量y=x.分割（“”）；
控制台日志（y）；
对于（变量i=0；i


填充
我相信一定有关闭问题。试试这个js代码。我把循环中的所有东西都封装在一个生命函数中。我想这里已经解释得很清楚了


函数fill（）{
var x=document.getElementById（'input'）。值；
变量y=x.分割（“”）；
对于（变量i=0；i
这解决了闭包问题，并且简化了输出数据的逻辑。无需将字符串拆分为数组：


函数填充（）{
var x=document.getElementById（'input'）。值，
p=document.getElementById（'p'）；
对于（变量i=0；i


Fill
我不明白，如果I等于0，为什么要将超时设置为0（因为50*0是0）。@eric yuyokk的解决方案很恰当，但我认为这是一个逻辑错误，因为第二个超时需要在else块中，因为您希望回显准确的字符串。这是一个很好的解决方案！！我没有检查函数的逻辑，但至少它输出字母
<script>
  function fill() {
      var x = document.getElementById('input').value;
      var y = x.split('');
      for (var i = 0; i < y.length; i++) {
        (function(i){
          if (i == 0) {
              setTimeout(function() {
                  document.getElementById('p').innerHTML = y[i];
              },(i * 50));
          }

          setTimeout(function() {
              document.getElementById('p').innerHTML += y[i];
          },(i * 50));
        })(i);
      }
  }
</script>