两道经典的面试题,直接上代码
for(var i=0; i<3; i++){ setTimeout(function(){ i+=i; console.log(i); },1000) } var i = 1; console.log(i);
会输出什么呢?先想一想,记下答案。继续下一题
for(var i=0; i<3; i++){ setTimeout(function(){ i+=i; console.log(i); },1000) } console.log(i);
改动很少,结果却相差甚远。先公布正确答案,第一段代码输出:1,2,4,8; 第二段代码输出:3,6,12,24。
意不意外?刺不刺激?惊不惊喜?
【代码解析】
首先,不要被定时器干扰,误以为它有延迟才会导致这样的结果,你可以尝试把延迟改成“0”或者去掉不写,结果依然相同。
引入一个概念-->异步,脱离当前事件队列的处理程序,而且必须等到正常队列里的事件完成后才会执行。
再来分析以上代码,
第一个,看到setTimeout,就知道知道它会在代码块的for循环及最后一个console.log完成后才执行,而且执行三次。毫无疑问,会先输出1,此时 i 的值为 1,再开始执行setTimeout进程,分别输出2,4,8.
第二个,需要对闭包有一定理解,js中的for循环是不存在私有作用域的,所以for循环最后结束时 i = 3,然后再执行setTimeout,依次是6,12,24.