在每次循环迭代中添加延迟答案

【问题标题】：Add delay on each loop iteration在每次循环迭代中添加延迟
【发布时间】：2014-10-12 09:04:03
【问题描述】：

这样做的总体目标是为某些文本实现类似打字的动画。我在 FOR 循环中使用 setTimeout 循环遍历字符串的每个字母并将其添加到 DOM，每个字母之间存在延迟。

我的 HTML--

<h1 id="name">Hello World!</h1>

我的 Javascript--

$(document).ready(function(){
    var typeText = $("#name").html();
    var textLength = typeText.length;
    $("#name").empty();

    for(i=0;i<textLength;i++) {
        (function(i){
            console.log("first function being fired!");
            setTimeout(function(i){
                console.log("setTimeout function being fired!");
                console.log(i);
                var letter = typeText.substring(i,i+1);
                console.log(letter);
                $("#name").append(letter);
            },5000);
        })();
    }
});

我没有收到任何错误，但我首先记录了 12 个“第一个函数被触发！”帐户，延迟 5 秒，然后是 12 个帐户：

setTimeout function being fired<br />
undefined<br />
[line-break]

我认为我遗漏了 FOR 循环的基本部分，或者不完全了解函数在其中的处理方式。

【问题讨论】：

标签： javascript jquery for-loop setinterval

【解决方案1】：

您没有将值传递给您的内部is。

$(document).ready(function(){
    var typeText = $("#name").html();
    var textLength = typeText.length;
    $("#name").empty();

    for(i=0;i<textLength;i++) {
        (function(i){
            console.log("first function being fired!");
            setTimeout(function(){ // not necessary here
                console.log("setTimeout function being fired!");
                console.log(i);
                var letter = typeText.substring(i,i+1);
                console.log(letter);
                $("#name").append(letter);
            },5000);
        })(i); // pass here
    }
});

如果您希望每个都在前一个之后触发 5 秒，而不是只等待 5 秒并执行所有操作，您可以像这样设置超时：

setTimeout(function(){
// ...
}, 5000 * i);

【讨论】：

啊！傻我。我仍然得到相同的日志：\
我添加了一种方法，让它们彼此间隔 5 秒。
你是个创造奇迹的人！所以，我想我不明白为什么迭代一次就全部进行了 12 次。我认为函数完成后迭代计数会增加（延迟 5 秒后）。我在这里误解了什么原则？
for 循环一次运行，因此它将所有超时设置为从运行时开始的 5 秒。因此，它们都同时运行。通过增加延迟，我将后面的延迟推到更晚。

【解决方案2】：

我相信您正在寻找这样的行为：

function doLetter(totaltext, i) {
  console.log("function being fired on text",totaltext,"at position",i);
  var letter = totaltext.substring(i, i + 1);
  console.log(letter);
  $("#name").append(letter);
  if(i<totaltext.length-1){
    setTimeout(doLetter.bind(null,totaltext,i+1), 500);
  }
}

$(document).ready(function() {
  var typeText = $("#name").html();
  $("#name").empty();
  doLetter(typeText,0);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<body>
  <p id="name">Hello World!</p>
</body>

整个交易不是一次运行所有的信件处理程序。运行一个，让它知道它正在处理的原始文本。一旦完成它的字母，它将为下一个字母设置超时。注意“绑定”:)

【讨论】：