今天看博客注意到一段代码,挺有意思,在此引入分析作为个人笔记,代码如下:
1 var value1 = 0, value2 = 0, value3 = 0; 2 for ( var i = 1; i <= 3; i++) { 3 var i2 = i; //1,2,3 4 (function() { 5 var i3 = i; 6 setTimeout( 7 function() { 8 value1 += i; 9 value2 += i2; 10 value3 += i3; 11 12 } 13 14 , 1); 15 })(); 16 } 17 setTimeout(function() { 18 console.log(value1, value2, value3); 19 }, 100);
这段代码执行的结果为:12 9 6
分析如下:
1.最后的setTimeout延迟时间较长为100ms,当前面循环执行完后才会执行。
2.for循环每次都会执行一个function,该funtion存在一个延迟1ms执行的方法(类似于异步方法),由于for循环很快,所以存在,for信息都执行完成后function还未执行的可能。
3.由1,2,分析,改代码即为3个异步的function,该funtion里面的i,i2,i3的值随循环而变动。
4.结果为:
因为vulue1=i(由于直接将i赋值给value1,而循环完后i为4),所以为 4+4+4=12
因为value2=i2 (由于i是在在循环里面赋值给i2,所以i为最后一次满足要求的i的值3) ,所以为 3+3+3 = 9
因为value3=i3 (由于i是在在function里面赋值给i3,所以i3为每次i循环的值) ,所以为 1+2+3=6