在每次循环迭代中增加延迟
[英]Add delay on each loop iteration
问题描述
总体目标是为某些文本实现类似打字的动画。 我正在遍历字符串的每个字母，并使用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循环的基本部分，或者不完全了解如何在其中处理函数。
2 个解决方案
解决方案1
1 已采纳 2014-10-12 09:07:13
你不是一个值传递到你内心的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
}
});
而且，如果您希望每个按钮在前一个命令之后5秒钟触发，而不仅仅是等待5秒钟并执行所有操作，则可以这样设置超时时间：
setTimeout(function(){
// ...
}, 5000 * i);
解决方案2
0 2014-10-12 09:53:20
我相信您正在寻找这样的行为：
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>
整个过程不是立即运行所有字母处理程序。 运行一个，让它知道正在处理的原始文本。 完成字母处理后，它将为下一个字母设置超时。 注意“绑定” :)
在for循环的每次迭代之后添加延迟
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.