javascript - 为什么未定义javascript参数？

我收到“ txtname”未定义的错误。

    let i = 0;
let txtOne = 'Hi';
let txtTwo = 'My name is Sarah';
let txtThree = "and I'm learning web development";
let speed = 200;
let firstdiv = document.querySelector(".firstOne");
let nextdiv = document.querySelector(".nextOne");
let lastdiv = document.querySelector(".lastOne");

function typeWriter(txtname, divname) {
    if (i < txtname.length) {
divname.innerHTML += txtname.charAt(i);
       i++;
        setTimeout(typeWriter, speed);
    }
}

window.onload = typeWriter(txtOne, firstdiv);
firstdiv.addEventListener("animationend", typeWriter(txtTwo, nextdiv));
nextdiv.addEventListener("animationend", typeWriter(txtThree, lastdiv));

为什么txtname显示为undefined？它不应该被我在typeWriter函数中作为参数传递的内容所取代吗？
为什么typeWriter函数不查看txtOne.length或txtTwo.length等？

我仍在学习javascript，因此，如果这是一个基本错误，请原谅。

最佳答案

setTimeout(typeWriter, speed)表示在200毫秒内将不带任何参数调用typeWriter。上一个调用的参数不会自动结转到下一个调用，您需要提供它们。您可以使用匿名函数执行此操作：

setTimeout(function () { typeWriter(txtname, divname) }, speed)

解决此问题时，您可能还应该将类似i的状态移入函数中，而不要依赖于全局状态。您可以通过接受i作为参数来实现，但是给它一个默认值0：

function typeWriter(txtname, divname, i) {
    i || (i = 0);

    if (i < txtname.length) {
        divname.innerHTML += txtname.charAt(i);
        setTimeout(function () { typeWriter(txtname, divname, i + 1) }, speed);
    }
}

这是带有递归函数的常见模式。

另一个问题是您设置事件处理程序的方式。您实际上是将typeWriter函数的返回值设置为事件处理程序，而不是函数本身。您应该删除调用运算符，即window.onload = typeWriter，但是由于要使用特定参数调用该函数，因此需要将代码包装在另一个函数中：

window.onload = function() { typeWriter(txtOne, firstdiv) };
firstdiv.addEventListener("animationend", function() { typeWriter(txtTwo, nextdiv) });
nextdiv.addEventListener("animationend", function() { typeWriter(txtThree, lastdiv) });