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

代码给我一个错误：

unturew typeError：无法读取未定义的属性"长度" 在打字机

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

Answer 1

问题是，用setTimeout延迟typeWriter呼叫不会传递任何参数 - 因此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将导致此错误。