Settimout不工作For循环,行事怪异?
问题描述:
我试图用JavaScript模拟打字机效果。 Theorically它应该与我的代码工作:Settimout不工作For循环,行事怪异?
function TypeWriteToDoc(txt, id, x){
document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + txt.charAt(x);
}
function TypeWrite(txt,id){
for (var i = 0; i < txt.length; i++){
setTimeout(function() {
TypeWriteToDoc(txt, id, i);
}, 1000*(i+1));
}
}
这应该是它,当我打电话TypeWrite("example", "p_test");
应该在“p_test” HTML写“测试”的每个字符。我认为这个问题它不是对,因为我的呼唤,而无需使用setTimeout
它的工作原理的功能等在下面的代码我的代码:
function TypeWriteWithNoSettimeout(txt, id){
for (var i = 0; i < txt.lenght; i++){
TypeWriteToDoc(txt, id, i);}
}
答
这是在for循环与回调函数var
的共同课题。
最简单的解决方案?改为使用let
。 let
支持all major browsers。
function TypeWrite(txt,id){
for (let i = 0; i < txt.length; i++){
setTimeout(function() {
TypeWriteToDoc(txt, id, i);
}, 1000*(i+1));
}
}
答
类似以前的回应,而不是与div.innerHtml一起追加原文,我调整了它是只是文本字符来模拟更多打字机的感觉。为了增加延迟,我把这个指数乘以1000而不是增加它,因为更大的增量更明显。
function TypeWriteToDoc(txt, id, i) {
setTimeout(function() {
var div = document.getElementById(id)
div.innerHTML +=txt.charAt(i)
}, 1000 * (i))
}
function TypeWrite(txt,id){
for (var i = 0; i < txt.length; i++) {
TypeWriteToDoc(txt, id, i)
}
}
TypeWrite('example', 'p_test')
<div id="p_test"></div>
这是什么问题?你似乎说你的代码不起作用,但你没有说出什么问题。 – Carcigenicate
它根本不起作用。上面的代码“setTimeout”什么都不做。 –