兩道經典的面試題,直接上代碼
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.