Question

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

2017-12-22

405

javascript html animation dom

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

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

}

代码出错：

Uncaught TypeError: Cannot read property 'length' of undefined at typeWriter

我应该怎么做才能让代码正常工作？还有其他替代方案吗？

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 将导致此错误。