javascript - setTimeout() 重复操作的问题

Question

我有一个变量，其中包含一个字符串，我已将它 split() 放入一个数组中，并使用 shift() 方法一次打印一个字母一个 div。我使用 setTimeout 重复该过程并打印出整个字符串。我遇到的问题是该函数重复打印出第一个字母而不移动到字符串中的下一个字母。我使用了我所知道的将 setTimeout 与参数一起使用的唯一方法，但似乎没有任何效果。

代码哪里出了问题？

<div id='ltrType'></div>
<script>
function buildWord(str) {
    var arr = str.split('');

    if(arr.length > 0) {
        document.getElementById('ltrType').innerHTML += arr.shift();
    } else {
        clearTimeout(timer);
    }

    //I've tried setTimeoout like this
    timer = setTimeout(buildWord,100,str);

    //and like this
    timer = setTimeout(function(){ buildWord(str); })
}

buildWord('this is another string blah blah blah');

Answer 1

你一直在传递 str，而你转移的是 arr。所以基本上你每次都传递相同的字符串，第一个字符每次都是相同的。相反，这样做:

function buildWord(arr) {
    if (typeof arr === "string") {
        arr = arr.split('');
    } 
    if (arr.length) {
        document.getElementById('ltrType').innerHTML += arr.shift();
        setTimeout(function () {
            buildWord(arr);
        }, 100);
    }
}

buildWord('this is another string blah blah blah');