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

Question

我收到“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 显示为未定义？它不应该被我在 typeWriter 函数中作为参数传递的任何内容替换吗？为什么 typeWriter 函数不查看 txtOne.length 或 txtTwo.length 等？

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

Answer 1

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) });