for(var i=0;i<8;i++){ setTimeout(function () { console.log(i) },0) }
輸出了8次8,這跟js的執行順序和作用域鏈有關。
規則:
同步優先、異步靠邊、回調墊底。
用公式表達就是:同步 => 異步(定時器 or 異步請求) => 回調
1、js同步執行與異步執行
js的執行機制: js是單線程環境,從上到下、依次執行,即 同步執行;在這段代碼中,for循環是同步代碼,setTimeout是異步代碼。
js在執行代碼的過程中,碰到同步代碼會依次執行,碰到異步代碼就會將其放入任務隊列中進行等待,當同步代碼執行完畢后再開始執行異步代碼,即 異步執行。
2、js作用域問題
當同步代碼執行完畢后,開始執行異步的setTimeout代碼,執行setTimeout時需要從當前作用域內尋找一個變量 i ,此時for循環已執行完畢,當前 i=8,所以執行setTimeout時輸出為8,任務隊列中的剩余7個setTimeout也依次執行,輸出為8。
3、常用解決方法
利用立即執行函數,當for循環執行時,就會立即執行setTimeout,從而使得到的每個副本i值都不一樣,這樣就可以得到想要的for循環的結果。如:
for(var i=0;i<8;i++){ (function (x) { setTimeout(function () { console.log(x) },0) })(i); }
參考:
https://blog.csdn.net/ld767416042/article/details/84030668
https://www.cnblogs.com/wangwenhui/p/7657654.html
https://blog.csdn.net/huakaiwuxing/article/details/78968642
https://baijiahao.baidu.com/s?id=1621653715044760064&wfr=spider&for=pc
https://blog.csdn.net/u010297791/article/details/71158212
https://blog.csdn.net/jssy_csu/article/details/78627628