Question

有人可以解释为什么第一个代码块的输出只是重复'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);
  }
}

Answer 1

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

Answer 2

在第一个程序段中，您要一遍又一遍地调用typeWriter()直到i >= txt.length。但实际上，您要做的是：每当您呼叫typeWriter()时，都会调用第一行var i = 0并将i重置为0。如果您希望它按您的意愿工作，则只需要在函数外部定义i，它应该看起来像第二个块

打字机功能

2 个答案: