【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 等待圖片加載

• 事件綁定

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

異步和單線程

• js是單線程的，所以必須異步
• 單線程的特點：不能同時幹兩件事

題目解答

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

同步會阻塞代碼執行，而異步不會

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 4 異步需要等待，所以2是5輸出後纔會執行

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