面試題：1到10 ，每隔一秒輸出一個

自執行函數for (var i=1; i<=10; i++) {(function (i) {setTimeout(() => console.log(i), 1000*i)})(i)} 復制代碼塊級作用域for (let i=1; i<=10; i++) {(function () {setTimeout(() => console.log(i), 1000*i)})()} 復制代碼

其實面試官是想問js的同步編程以及異步編程

JS中的同步編程和異步編程

JS是單線程的（一個任務只能執行一次，當前任務沒有完成，下面的任務是不會進行處理的）

同步編程（sync：synchronize）:任務是按照一件件的完成的，當前任務沒有完成，下面的任務不進行處理

異步編程（async::當前任務在等待執行的時候，我們不去執行，繼續完成下面的任務，當下面的任務完成后，而是也到達等待的時間了，采取執行當前的任務

異步編程

> 定時器是異步編程的> 所有的事件綁定也是異步編程> AJAX中有異步編程> 有些人把回調函數當做異步編程（理解起來比較牽強）> 其余的都是同步編程 復制代碼

同步編程個異步編程的核心原理

1、JS 中有兩個任務隊列（存放任務列表的空間就是任務隊列）

1）主任務隊列：同步執行任務（從上到下依次執行）

2）等待任務隊列：異步執行任務

setTimeout(function () {console.log(1); }, 50);setTimeout(function () {console.log(2); }, 10);setTimeout(function () {console.log(3); }, 30);for (var i = 0; i < 100000000; i++) {//=>需要600MS~700MS } console.log(4); //輸出4,2,3,1，先執行循環，因為定時器異步編程,先放到等待隊列，然后瀏覽器取執行循環，執行完事再去執行定時器，按照時間先后順序執行復制代碼for (var i = 1; i <= 5; i++) {setTimeout(function () {console.log(i);//輸出5次6}, (5 - i) * 10); }//=>[主任務隊列] // i=1 創建一個定時器 // i=2 創建一個定時器 // i=3 創建一個定時器 // i=4 創建一個定時器 // i=5 創建一個定時器 // i=6 循環結束，此時主任務隊列中的方法都已經執行完成了，到等待任務隊列中找先到時間的方法，拿到主任務隊列中執行 // 執行它 function () {console.log(i);}，i不是自己私有的，找全局下的i(此時的i已經是6了)//=>[等待任務隊列] // 40MS后執行某方法 // 30MS后執行某方法 // 20MS后執行某方法 // 10MS后執行某方法 // 0MS后執行某方法復制代碼 for (var i = 0; i <oList.length; i++) {oList[i].onclick=function () {alert(i);} }for (var i = 1; i <= 5; i++) {~function (i) {setTimeout(function () {console.log(i);}, (5 - i) * 10);}(i); } 復制代碼for ( i = 1; i <= 5; i++) {~function(i){ setTimeout(function () {console.log(i);//依次輸出5,4,3,2,1}, (5 - i) * 10);}(i) } 復制代碼

轉載于:https://juejin.im/post/5c6fbbcb51882562e7480f1d

總結

以上是生活随笔為你收集整理的javascript事件循环机制EventLoop的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。