javascript - 打字机功能

有人可以解释为什么第一个代码块输出只是重复“ T”而第二个代码块有效吗？
第一个代码块：

function typeWriter() {
  var i = 0,
  txt = 'Testing',
  speed = 40,
  typed = document.getElementById('typewriter');

  (function addChar() {
    if (i < txt.length) {
      typed.innerHTML += txt.charAt(i);
      i++;
      setTimeout(typeWriter, speed);
    }
  })();
}

document.onload = typeWriter();

第二个代码块：

var i = 0,
  txt = 'Testing',
  speed = 40;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById('typewriter').innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

最佳答案

在第一个代码块中，每次typeWriter（）调用都将i = 0设置为零，因此您始终会得到“ T”。在第二个中，我在typeWriter（）之外定义，因此它的值在两次调用之间保持不变。