js同步異步以及回調函數
1.背景介紹
什么是同步，什么是異步?
同步指的是一次只能完成一件任務。如果有多個任務，就必須排隊，前面一個任務完成，再執行后面一個任務，以此類推。
異步指的是每一個任務有一個或多個回調函數（callback），前一個任務結束后，不是執行后一個任務，而是執行回調函數，后一個任務則是不等前一個任務結束就執行，所以程序的執行順序與任務的排列順序是不一致的、異步的。
2.知識剖析
javascript實現異步的原理
首先js是單線程的語言，即同一時間只能做做一件事。那Js如何實現異步的，異步和單線程不是自相矛盾嗎？其實，單線程和異步確實不能同時成為一個語言的特性。js選擇了成為單線程的語言，所以它本身不可能是異步的，但js的宿主環境（比如瀏覽器，Node）是多線程的，宿主環境通過某種方式（事件驅動，下文會講）使得js具備了異步的屬性
瀏覽器的內核是多線程的，它們在內核制控下相互配合以保持同步，一個瀏覽器至少實現三個常駐線程：javascript引擎線程，UI渲染線程，瀏覽器事件觸發線程。
javascript引擎線程是基于事件驅動單線程執行的，JS引擎一直等待著任務隊列中任務的到來，然后加以處理，瀏覽器無論什么時候都只有一個JS線程在運行JS程序。
UI渲染線程負責渲染瀏覽器界面，當界面需要重繪（Repaint）或由于某種操作引發回流(reflow)時,該線程就會執行。但需要注意UI渲染線程與JS引擎是互斥的，當JS引擎執行時UI線程會被掛起，UI更新會被保存在一個隊列中等到JS引擎空閑時立即被執行.
事件觸發線程，當一個事件被觸發時該線程會把事件添加到待處理隊列的隊尾，等待JS引擎的處理。這些事件可來自JavaScript引擎當前執行的代碼塊如setTimeOut、也可來自瀏覽器內核的其他線程如鼠標點擊、AJAX異步請求等，但由于JS的單線程關系所有這些事件都得排隊等待JS引擎處理。
image
分析：第一個在keydown的時候，彈出來的是input里原來的value，而第2個在keydown的時候，卻能彈出更新后的value，就是因為setTimeout，雖然他的delay設置為0，幾乎是即時觸發，但還是被添加到了執行隊列后面，但就是這個過程，渲染已經完成了，當他回調函數執行時，輸出來的已經是更新后的value了。
注意：js的工作機制是當線程空閑的情況下才會執行異步代碼的回調函數
即當所有同步任務執行完畢后才會執行異步任務的回調函數
總結：當Js執行到異步任務后，會將異步任務交給瀏覽器進行執行，當執行有結果時會把異步任務的回調函數插入待處理隊列的隊尾。
3.常見問題
ajax發送異步請求瀏覽器做了什么
有哪些常見異步回調函數？
4.解決方案
ajax發送異步請求瀏覽器做了什么？
Js創建了一個ajax請求
瀏覽器另外開啟一個ajax引擎線程，執行ajax請求
執行得到響應后將回調函數放入任務隊列中。
Js執行任務隊列中的回調函數。
有哪些常見的異步回調函數？
點擊事件
Ajax請求
定時器
瀏覽器處理點擊事件的過程
瀏覽器開啟事件觸發線程，等待用戶動作，事件觸發線程解析為響應事件，轉移到javascript引擎線程，排隊等候，等待javascript引擎的處理。
例：
click mefunctionclickme(){console.log('點擊事件')? ? }for(i=0;i<50000;i++){console.log(i)? ? }
這個點擊事件會等到for循環執行完畢后才會執行，即我們點擊模塊它直到for循環執行完畢才會執行
5.編碼實戰
6.擴展思考
如何實現js的多線程操作？
Html5的web worker
7.更多討論
8.參考文獻
參考一：js的單線程和異步
參考二：深入理解javascript異步編程障眼法&&h5 web worker實現多線程
參考三：談談JavaScript的異步實現- 小方- 博客園
Q1：瀏覽器的UI線程和Js線程為什么是互斥的？
A1：而因為JS可以操作DOM元素，進而會影響到GUI的渲染結果，因此JS引擎線程與GUI渲染線程是互斥的。
Q2:異步函數有哪些優點和缺點
A2：
優點：
a）對CPU的使用率高。
b）不用考慮線程間同步互斥問題。
缺點：
a）實現較復雜，要把所有會導致阻塞的操作轉化為異步操作。
b）并發性不好，在有的事件需要長時間占用CPU處理的情況下，其他事件會長時間等待得不到處理。
c）在多CPU時不如多線程高效。
Q3：異步函數跟promise之間有什么關系？
A3：Promise它可以用于異步的回調函數，它跟傳統的回調函數相比，promise的異步回調函數代碼書寫起來更優雅，更便于閱讀。
