【JS面試】第五章 異步和單線程

1. 同步和異步的區別是什麼？分別舉例
2. 一個關於setTimeout的筆試題
3. 前端使用異步的場景有哪些

什麼是異步（對比同步）

判斷有沒有阻塞

• 異步：無阻塞，我走個人，走完以後回來再說，等着執行，可是不卡在那兒，等着但不閒着

console.log(100)
setTimeout(function () {
  console.log(200) // 未阻塞，沒有在這兒停頓1s並打印200
}, 1000)
console.log(300)
// 100 300 200

• 同步：有阻塞，會阻塞下面代碼的執行

console.log(100)
alert(200) // 1秒後點擊確認
console.log(300)

前端使用異步的場景

在可能發生等待的狀況，等待過程當中不能像alert同樣阻塞程序運行，所以，全部的等待狀況都須要異步

• 定時任務：setTimeout、setInverval
• 網絡請求：Ajax請求（請求Google CDN），動態<img>加載

// Ajax請求demo
console.log('start');
$.get('./data1.json', function (data1) {
  console.log(data1);
});
console.log('end');
// start end 等待Ajax執行

// <img>加載demo
console.log('start');
var img = document.createElement('img');
img.onload = function () {
  console.log('loaded');
};
img.src = '/xxx.png';
console.log('end');
// start end 等待圖片加載

• 事件綁定
  可執行屢次，能夠點擊再點擊，而前2個場景只能執行1次

// 事件綁定demo
console.log('start');
document.getElementById('btn1').addEventListener('click', function () {
  alert('clicked');
});
console.log('end');
// start end 等待元素點擊事件發生

異步和單線程的實現原理

執行順序demo

console.log(100)
setTimeout(function () {
  console.log(200)
})
console.log(300)

1. 執行第一行，打印100
2. 執行setTimeout後，傳入setTimeout的函數會被暫存起來，不會當即執行
   單線程的特色，不能同時幹兩件事
3. 執行最後一行，打印300
4. 待全部程序執行完，處於空閒狀態時，會立馬看有沒有暫存起來的任務要執行
5. 發現暫存起來的setTimeout中的函數無需等待時間，就當即來過來執行

執行順序原理

• 全部異步中的函數都會被拿出去暫時不執行，讓它們等待

1. 全部的異步都是有函數的
2. 只是暫存，並不排成隊列

• 全部同步任務執行完後，要看邊上有沒有等待的程序在執行
• 全部異步等待的任務，同時判斷是否知足如下條件，無論排隊或者代碼書寫前後

1. 是否有等待時間
2. 發送的請求是否正確返回
3. 綁定事件是否發生

• 如有，則被封禁，等待時間發生時解禁執行異步任務
• 若無，則一直處於解禁狀態，直接執行等待的異步任務

什麼是單線程

• 單線程一次只能幹一件事，只能一個一個任務排隊來，不能同時執行兩個任務
• JavaScript是單線程的，可是又不能讓程序阻塞卡頓，因此必須異步

題目解答

1. 同步和異步的區別是什麼？分別舉例

• 同步會阻塞代碼執行，而異步不會
• alert是同步，setTimeout是異步

2. 一個關於setTimeout的筆試題

console.log(1)
setTimeout(function () {
  console.log(2)
}, 0)
console.log(3)
setTimeout(function () {
  console.log(4)
}, 1000)
console.log(5)
// 1 3 5 2 1s後打印4

3. 前端使用異步的場景有哪些

• 定時任務：setTimeout、setInverval
• 網絡請求：Ajax請求、動態<img>加載
• 事件綁定