Question

尝试调试以下代码

function split(toRead, toReplace, speed) {
    var words = $(toRead).html().split(" ");
    for (var i = 0; i < words.length; i++) {
        //console.log(words[i]);
        setTimeout(function () {
            $(toReplace).html(words[i]);
        }, speed * i);
    }
}

代码应该接收一个文本块'toRead'，将其分解为单词，然后用设置的时间间隔用每个单词替换'toReplace'。就像http://www.spreeder.com/一样。

然而，它似乎不起作用。我猜这与定时和for循环有关（看起来像for循环结束而不管定时器，使得[i]每次都读取相同的单词）。

非常感谢任何帮助，谢谢你们和他们加尔斯:) 干杯，尼尔

Answer 1

尝试使用：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="toRead">This is a sample text do demonstrate that the code below works fine. Please test this code and vote up if it works for you !!</div>
<div id="results"></div>
<script type="text/javascript"> 
var ctr=0;
function displayWords(words,len,toReplace,speed){
    if(ctr<len){
        setTimeout(function(){
            $(toReplace).html(words[ctr]);
            ctr++;
            displayWords(words,len,toReplace,speed);
        },speed);
    }
}

function split(toRead, toReplace, speed) {
    var words = $(toRead).html().split(" ");
    displayWords(words,words.length,toReplace,speed);
}

split(document.getElementById("toRead"),document.getElementById("results"),200);
</script>
</body>
</html>

说明：在for循环中使用setTimeout时，JavaScript引擎不会延迟代码执行并等待超时。

因此，正确的方法是使用递归函数，然后检查是否尚未达到计数，然后再次调用相同的函数。继续这个直到达到计数。这样您就可以获得所需的功能。

Answer 2

您可能想append到 toReplace DIV的内容。在您的问题中，您只需更改内容，如下所示

$('#toReplace').html(words[i]);

如果你想追加你应该

$('#toReplace').html().append(" " + words[i]);

请注意，$('#toReplace')代替$(toReplace) - 这意味着您要定位ID toReplace 的元素。 < / p>

但是，如果您将元素直接传递给方法，就应该直接使用

toReplace.html(words[i]); // and so on.. don't use $(toReplace)

for loop和timing，需要帮助调试

2 个答案: