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

Answer 2

因为您每次在方法调用上构建初始数组，所以将其移到

之外

function buildWord(str)
{
   var arr = str.split(' ');

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

       setTimeout(helper, 100);
   }
   setTimeout(helper, 100);
}

buildWord("bla bla1 bla123");

Answer 3

beacuse arr每次都被初始化为相同的值，你一次又一次地调用buildword，因为你正在传递str。试着把它放在函数之外。

var arr=null;
var firsttime=0;
function buildWord(str)
{
if(firsttime==0)
{ arr=str.split('');firsttime=1;}
.....
}

setTimeout（）重复操作的问题

3 个答案: