異步和同步也是面試中常考的內容，下面筆者來講解下同步和異步的區別。 ### 同步 vs 異步 先看下面的 demo，根據程序閱讀起來表達的意思，應該是先打印`100`，1秒鐘之后打印`200`，最后打印`300`。但是實際運行根本不是那么回事。 ~~~ console.log(100) setTimeout(function () { console.log(200) }, 1000) console.log(300) ~~~  再對比以下程序。先打印`100`，再彈出`200`（等待用戶確認），最后打印`300`。這個運行效果就符合預期要求。 ~~~ console.log(100) alert(200) // 1秒鐘之后點擊確認 console.log(300) ~~~ 這倆到底有何區別？—— 第一個示例中間的步驟根本沒有阻塞接下來程序的運行，而第二個示例卻阻塞了后面程序的運行。前面這種表現就叫做**異步**（后面這個叫做**同步**），即**不會阻塞后面程序的運行**。 ### 異步和單線程 JS 需要異步的根本原因是**JS 是單線程運行的**，即在同一時間只能做一件事，不能“一心二用”。 一個 Ajax 請求由于網絡比較慢，請求需要 5 秒鐘。如果是同步，這 5 秒鐘頁面就卡死在這里啥也干不了了。異步的話，就好很多了，5 秒等待就等待了，其他事情不耽誤做，至于那 5 秒鐘等待是網速太慢，不是因為 JS 的原因。 講到單線程，我們再來看個真題： > 題目：講解下面代碼的執行過程和結果 ~~~ var a = true; setTimeout(function(){ a = false; }, 100) while(a){ console.log('while執行了') } ~~~ 這是一個很有迷惑性的題目，不少候選人認為`100ms`之后，由于`a`變成了`false`，所以`while`就中止了，實際不是這樣，因為JS是單線程的，所以進入`while`循環之后，沒有「時間」（線程）去跑定時器了，所以這個代碼跑起來是個死循環！ ### 前端異步的場景 * 定時`setTimeout``setInterval` * 網絡請求，如`Ajax``<img>`加載 Ajax 代碼示例 ~~~ console.log('start') $.get('./data1.json', function (data1) { console.log(data1) }) console.log('end') ~~~ img 代碼示例（常用于打點統計） ~~~ console.log('start') var img = document.createElement('img') // 或者 img = new Image() img.onload = function () { console.log('loaded') img.onload = null } img.src = '/xxx.png' console.log('end') ~~~