setTimeout如何使用循环 [英] how does setTimeout working with a loop
本文介绍了setTimeout如何使用循环的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个大问题;以下两个代码片段
没有SetTIMEOUT
for （ var i = 1 ; i< = 2 ; i ++）
（function（）{
console.log（i）;
}）（）;
输出（完全可以理解我的能力）
1
2
withsetTime out
for （ var i = 1 ; i< = 2 ; i ++）
setTimeout（function（）{
console.log（ i）;
}）;
它让我回复[让我很困惑]
3
3
i知道setTimeout在一段时间内重复一个function\work但上面的代码我不明白为什么这是returnin g 3和3 ??它是如何工作的？
解决方案
仔细考虑一下会有什么困惑。
=> setTimeout（） - 在等待指定的毫秒后执行一次函数
你通过内部函数循环两次...你认为这多久了需要?????
答案非常非常非常快，不到1毫秒
因此，当延迟功能运行时，我将是3 ...你的循环的救助条件
这里是一步一步
步骤1：i = 1它启动第一个SetTimeout（非常非常快&<1毫秒）
步骤2：i递增所以我现在= 2
步骤3：i = 2它启动第二个SetTimeout（非常非常快< 1毫秒）
步骤4：我增加所以我现在= 3
步骤5 ：循环失败，因为我失败了条件i< = 2
**此时POINT => i = 3
一段时间之后第一个SetTimeout函数运行...正确返回i = 3
一段时间之后第二个Setimeout函数运行...正确返回i = 3
您应该阅读本文以了解 JavaScript闭包与匿名函数 [ ^ ]
运行以下示例以查看结果：
< ！DOCTYPE html >
< html >
< 正文 >
< 按钮 onclick = testing（） > 尝试< ; / button >
< script >
function testing（）
{
for（var i = 1; i < = 2; i ++）{
< span class =code-attribute>
< span class =code-attri bute> < span class =code-attribute> document.write（before i = + i + < br > ）;
setTimeout（
（function（s）{document.write（setTimeout function =+ s +< < span class =code-leadattribute> br > ）;}）（i）
）;
document.write（i =+ i +< br > ）;
}
}
< / script >
< / body >
< / html >
结果是：
之前i = 1
setTimeout function = 1
i = 1
之后i = 2
setTimeout function = 2
i = 2
i have a big problem; two code snippet below
without SetTIMEOUT
for(var i=1;i<=2;i++ )
(function (){
console.log(i);
})() ;
output(completely understand able for me)
1
2
withsetTime out
for(var i=1;i<=2;i++ )
setTimeout(function (){
console.log(i);
}) ;
it returning me [quite confusing for me]
3
3
i know that setTimeout repeat a function\work within some duration but the above code i am not getting why this is returning 3 and 3?? how does it works?
解决方案
What is there to be confused about think about it carefully.
=> setTimeout() - executes a function, once, after waiting a specified number of milliseconds
You loop it thru the inside function twice ... How long do you think that will take?????
The answer is very very very very fast like less than 1 millisecond
So by the time the delayed functions ever run i will be 3 ... the bailout condition of your loop
here it is step by step
step 1: i = 1 it launchs the first SetTimeout (very very fast < 1 millisecond) step 2: i is incremented so i now = 2 step 3: i = 2 it launchs the second SetTimeout (very very fast < 1 millisecond) step 4: i is incremented so i now = 3 step 5: the loop bails out because i fails the condition i<=2 ** AT THIS POINT => i = 3 Some time later 1st SetTimeout function runs ... correctly returning that i = 3 Some time later 2nd Setimeout function runs ... correctly return that i = 3
You should read this to understand JavaScript closures vs. anonymous functions[^]
Run the following example to see the result:
<!DOCTYPE html> <html> <body> <button onclick="testing()">Try it</button> <script> function testing() { for(var i=1;i<=2;i++){ document.write("before i = " + i + "<br>"); setTimeout( (function(s){document.write("setTimeout function = " + s + "<br>");})(i) ); document.write("after i = " + i + "<br>"); } } </script> </body> </html>
The outcome is:
before i = 1 setTimeout function = 1 after i = 1 before i = 2 setTimeout function = 2 after i = 2
这篇关于setTimeout如何使用循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
