在每次循环迭代中增加延迟
[英]Add delay on each loop iteration
问题描述
The overall goal of this is to achieve a typing-like animation for some text. 
总体目标是为某些文本实现类似打字的动画。 I'm looping through each letter of a string and adding it to the DOM with delays between each letter, using setTimeout within a FOR loop. 我正在遍历字符串的每个字母，并使用FOR循环中的setTimeout每个字母之间的延迟添加到DOM中。
My HTML-- 我的HTML--
<h1 id="name">Hello World!</h1>
My Javascript-- 我的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);
})();
}
});
I don't get any errors, but I am logged first with 12 accounts of "first function being fired!", a 5 second delay, then 12 accounts of this: 我没有收到任何错误，但是我首先使用12个帐户触发了“第一个功能被解雇！”，延迟了5秒，然后使用了12个帐户登录：
setTimeout function being fired<br />
undefined<br />
[line-break]
I think I'm missing a fundamental part of FOR loops, or don't completely understand how functions are handled within them. 我认为我缺少FOR循环的基本部分，或者不完全了解如何在其中处理函数。
2 个解决方案
解决方案1
1 已采纳 2014-10-12 09:07:13
You're not passing a value to your inner i s. 你不是一个值传递到你内心的i秒。
$(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
}
});
And if you want each to fire 5 seconds after the previous, instead of just waiting 5 seconds and doing all of them, you can set the timeout like that: 而且，如果您希望每个按钮在前一个命令之后5秒钟触发，而不仅仅是等待5秒钟并执行所有操作，则可以这样设置超时时间：
setTimeout(function(){
// ...
}, 5000 * i);
解决方案2
0 2014-10-12 09:53:20
I believe you were looking for a behavior like this: 我相信您正在寻找这样的行为：
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>
The whole deal is not to run all the letter handlers at once. 整个过程不是立即运行所有字母处理程序。 Run one, let it know the original text it's working on. 运行一个，让它知道正在处理的原始文本。 Once it's done with its letter, it will set a timeout for the next letter. 完成字母处理后，它将为下一个字母设置超时。 Mind the "bind" :) 注意“绑定” :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.