淺談異步編程

淺談異步編程

引子

頁面渲染與setTimeout();

同步與異步------個人理解

任務在當次事件循環中阻塞後續任務進行的（指的是耗時較多，這個多少，暫時尚未個概念，反正就是在獲取的cpu時間片中不作實際事情的就是阻塞吧），就是同步；任務在當次事件循環中不阻塞後續任務進行的（簡單的能夠理解爲，一條流水線上，某個步驟要檢測是否合格，不影響流水線的狀況下，由流水線以外的工做人員，至關於worker，去作這件事情），就是異步；

異步編程重要js設計模式-------發佈訂閱者模式

• 現實中的異步----------買車

小明要買車，小紅告訴他如今車還沒到，到的時候再打電話給他，因而小明留下了聯繫方式（訂閱）。等到一段時間後，車到了，小紅打電話給小明車到了（發佈），小明在接到電話以後，要作一些準備（訂閱時定義的回調函數）。

• 工做中的異步

經過事件實例去作調控，簡單的代碼示例：

// emitter是一個事件實例，負責發佈訂閱者的內部實現

// 訂閱
emitter.on('eventName', function () {
    dosomeThing();
});

// 發佈
// 另外一端程序幹一些事情。好了~時機到了，就：
emitter.emit('eventName');

發佈訂閱者模式其實在代碼執行順序上就是：訂閱（監聽）------> 發佈（觸發）

• 傳統異步編程

經過高階函數實現

// 定義高階函數
var asyncFn = function (cb) {
    // dosomeThing async...
    typeof === 'function' && cb();
};
// 使用
asyncFn(function (res) {
    // dosomeThing callback...
});

• 如今比較經常使用的Promise

var asyncFn = function () {
    // dosomeThing sync...
    Promise.resolve(); // 一般用於當次事件循環（或者當前線程執行）結束以後才須要乾的事情
}

// 碼段1
let asyncFn = new Promise((resolve, reject) => {
    resolve('完成');
});

asyncFn.then((res) => {
    console.log(res);
});
console.log('同步');

碼段1 執行結果:

VM51728:1 同步執行
22:26:27.891 VM51728:1 完成
22:26:27.891 undefined

產生異步的狀況

• setTimout()
• setInterval()
• requestAnimationFrame()
• Promise.resolve()方法
• 各類ajax異步請求
• Vue的nextTick()方法,由三種方式實現
• jsonp加載方式
• ...