从数组生成随机字符串时的JavaScript打字机动画;

Question

我有一个随机引号生成器。我想在用户点击生成按钮时发出打字机效果。我尝试了以前的代码中的函数

//var txt = 'I don't want to make the static';
//                  var speed = 70;
var i = 0;

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

function generateQuote() {
    document.getElementById("display").style.fontStyle = "normal";
    var random = Math.floor(Math.random() * (quotes.length));


    typeWriter(quotes[random], 70);

    //  document.getElementById("display").innerHTML='<i>'+quotes[random]+'</i>';

}

代码给了我一个错误：

未捕获的TypeError：无法在typeWriter中读取未定义的属性“length”

我该怎么做才能使代码工作？还有其他选择吗？

Answer 1

问题是typeWriter呼叫延迟与setTimeout将不会得到任何参数 - 因此txt值将是undefined。解决这个问题的一种方法是在typeWriter中创建内部函数，然后在setTimeout中使用它：

function typeWriter(txt, speed) {
    var i = 0;
    (function addLetter() {
       document.getElementById("display").innerHTML += txt.charAt(i);
       i++;
       if (i < txt.length) {
         setTimeout(addLetter, speed);
       }
    })();
}

在这里，addLetter的范围包括txt，speed和i。

Answer 2

由于在typeWriter中抛出错误，检查txt已被声明赋值，否则调用.length将导致此错误。