什麽是異步？

JS的執行環境是單線程，一定時間內只能執行一項任務，不能執行多項任務，為了要執行的代碼，就有一個javascript任務隊列。基於這一概念，JS執行任務時分為兩種模式：同步和異步。

“同步模式”是指後一個任務必須等待前一個任務完成後再執行，前一個任務加載時會阻塞後面程序的進行；“異步模式”不一定按順序執行任務，所以不會阻塞程序的運行。

//同步模式
console.log (100);
alert (200);
console.log (300);
//打印結果：100，200,（等待alert框點擊確定後）300

//異步模式
console.log (100);
setTimeout (function () {
    console.log (
 
200);
},1000);
console.log (300);
//打印結果：100，300，（隔一秒後）200

執行過程：先執行console.log(100)；再執行setTimeout，由於它是是異步函數，所以該函數被暫存起來放一邊，不立即執行；再執行console.log(300)；確定程序都執行完畢後，隊列處於空閑狀態，查看暫存的setTimeout，如果無需等待時間，則直接執行函數，如果有，則等待一定時間後執行函數。

（如果同時存在多個等待時間不同setTimeout，先執行等待時間短的）

前端使用異步的場景

何時需要異步？可能發生等待的情況下，需要繼續執行代碼的時候。比如說等待過程中不能像上面例子中alert一樣阻塞程序的運行。所以，需要等待的情況下都需要異步。

1、定時任務：setTimeOut，setInterval。例子如上；

2、網絡請求：ajax請求，動態<img>加載；

//ajax請求示例
console.log ("start");
$.get ("./data.json",function (data) {
    console.log ("data");
});
console.log ("end");
//打印結果：start，end，（請求到json數據之後）data

//img加載示例
console.log ("start");
var img = document.createElement ("img");
img.onload 
 
= function () {
    console.log ("onload");
}
img.src = "/xx.jpg";
console.log ("end");
//打印結果：start，end，（img圖片加載完成後）onload

3、事件綁定（點擊多次執行多次）

//事件綁定示例
console.log ("start");
document.getElementById ("btn").addEventListener (‘click‘,function () {
    console.log ("clicked");
})
console.log ("end");
//打印結果：start，end，（完成click點擊事件之後）clicked

理解JS異步和單線程