參考：link.
一、什麼是非同步？

console.log(100);
setTimeout(function(){console.log(200)},1000)
console.log(300);
//輸出順序200 100

非同步和同步最大的區別在於有沒有阻塞程式的進行，上面這種情況就沒有阻塞程式的進行，程式也沒有出現卡頓。如果是同步的，那麼就會列印完100，等待1000ms，打印出200，然後才會打印出300.來看如下程式 就是一個同步：

console.log(100)
alert(200)
console.log(300)
//彈出200後，如果不點選確認，程式就會卡在那裡，只有等點選了確認，程式才會繼續執行

什麼時間需要非同步？

• 在可能發生等待的情況下

• 等待過程中不能像alert一樣阻塞程式執行

• 因此，所有的‘等待情況’都需要非同步

二、前端使用非同步的場景？

• 定時任務：setTimeout、setInterval

• 網路請求：ajax請求、動態<img>載入

//ajax請求
console.log('start')
$.get('./data.json',function(data){console.log(data)})
console.log('end')

//動態載入<img>
console.log('start'
 
)
var img=document.createElement('img')
img.onload=function(){
console.log('loaded')
}
img.src='./***.png'
console.log('end')

• 事件繫結

console.log('start')
document.getElementById('btn1').addEventListener('click', function() {
    alert('clicked')
})
console.log('end')

三、非同步和單執行緒

• 什麼是單執行緒？

console.log(100)
setTimeout(function() {
    console.log(200)
})
console.log(300)
/列印順序，100， 300， 200

怎麼實現的上述列印順序？

• 執行第一行，列印100

• 執行setTimeout後，傳入setTimeout函式會被暫存起來，不會立即執行（單執行緒的特點，不能同時幹兩件事）

• 執行最後一行，列印300

• 待所有程式執行完，處於空閒狀態時，會立馬看有沒有暫存起來的要執行

• 發現暫存起來的setTimeout中的函式無需等待時間，就會立即過來執行