首頁 > 文章 > web前端 > JS非同步程式設計的介紹

JS非同步程式設計的介紹

不言原創: 2018-07-07 09:52:252487瀏覽

這篇文章主要介紹了關於JS非同步程式設計的介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

JS非同步程式設計( 1)

1.1 什麼叫非同步

#非同步(async)是相對於同步(sync)而言的，很好理解。

同步就是一件事一件事的執行。只有前一個任務執行完畢，才能執行後一個任務。而非同步例如：

setTimeout(function cbFn(){    console.log(&#39;learnInPro&#39;);
}, 1000);console.log(&#39;sync things&#39;);

setTimeout就是一個非同步任務，當JS引擎順序執行到setTimeout的時候發現他是個非同步任務，則會把這個任務掛起，繼續執行後面的程式碼。直到1000ms後，回呼函數cbFn才會執行，這就是異步，在執行到setTimeout的時候，JS並不會傻呵呵的等著1000ms執行cbFn回呼函數，而是繼續執行了後面的程式碼。

1.2 為啥要在JS中使用非同步

#由於javascript是單執行緒的，只能在JS引擎的主執行緒上執行的，所以js程式碼只能一行一行的執行，不能在同一時間執行多個js程式碼任務，這就導致如果有一段耗時較長的計算，或者是一個ajax請求等IO操作，如果沒有異步的存在，就會出現使用者長時間等待，並且由於當前任務還未完成，所以這時候所有的其他操作都會無回應。

1.3 那為啥JS不設計成多線程的

這主要跟javascript的歷史有關，js最開始只是為了處理一些表單驗證和DOM操作而被創造出來的，所以主要為了語言的輕量和簡單採用了單線程的模式。 多執行緒模型比起單執行緒要複雜很多，例如多執行緒需要處理執行緒間資源的共享問題，還要解決狀態同步等問題。

如果JS是多執行緒的話，當你要執行往p中插入一個DOM的操作的同時，另一個執行緒執行了刪除這個p的操作，這個時候就會出現很多問題，我們還需要為此增加鎖定機制等。

好，那麼現在我們知道了單執行緒的JS為了不出現長時間等待的狀況，會使用非同步來處理。例如執行一個ajax操作的時候，當js發出請求後，不會傻了吧唧的在那裡等著伺服器資料返回，而是去繼續執行後面的任務，等到伺服器資料返回以後再通知js引擎去處理。

那麼常見的非同步模式有哪些呢？

回呼函數

事件監聽

發布/訂閱模式（又稱觀察者模式)

promise

在後來ES6中，引入了Generator函數；ES7中，async/await 更是將非同步程式設計帶入了一個全新的階段。

這些非同步模式我們會在後面詳細來說，這裡我們有個概念就好。

1.4 JS如何實現非同步

具體JS是如何實現非同步操作的呢？

答案就是JS的事件循環機制(Event Loop)。

具體來說：

當JS解析執行時，會被引擎分成兩類任務，同步任務（synchronous） 和非同步任務（asynchronous）。

對於同步任務來說，會被推到執行堆疊依序去執行這些任務。
對於非同步任務來說，當其可以被執行時，會被放到一個 任務佇列（task queue） 裡等待JS引擎去執行。

當執行堆疊中的所有同步任務完成後，JS引擎才會去任務佇列裡查看是否有任務存在，並將任務放到執行棧中去執行，執行完了又會去任務佇列裡看看是否有已經可以執行的任務。這種循環檢查的機制，就叫做事件循環(Event Loop)。

对于任务队列，其实是有更细的分类。其被分为 微任务（microtask）队列 & 宏任务（macrotask）队列

宏任务: setTimeout、setInterval等，会被放在宏任务（macrotask）队列。

微任务: Promise的then、Mutation Observer等，会被放在微任务（microtask）队列。

Event Loop的执行顺序是：

首先执行执行栈里的任务。

执行栈清空后，检查微任务（microtask）队列，将可执行的微任务全部执行。

取宏任务（macrotask）队列中的第一项执行。

回到第二步。

注意：微任务队列每次全执行，宏任务队列每次只取一项执行。

我们举个例子：

setTimeout(() => {    console.log(&#39;我是第一个宏任务&#39;);
    Promise.resolve().then(() => {        console.log(&#39;我是第一个宏任务里的第一个微任务&#39;);
    });
    Promise.resolve().then(() => {        console.log(&#39;我是第一个宏任务里的第二个微任务&#39;);
    });
}, 0);

setTimeout(() => {    console.log(&#39;我是第二个宏任务&#39;);
}, 0);

Promise.resolve().then(() => {    console.log(&#39;我是第一个微任务&#39;);
});console.log(&#39;执行同步任务&#39;);

最后的执行结果是：

// 执行同步任务

// 我是第一个微任务

// 我是第一个宏任务

// 我是第一个宏任务里的第一个微任务

// 我是第一个宏任务里的第二个微任务

// 我是第二个宏任务

1.5 JS异步编程模式

这里我们已经知道了JS中异步的运行机制，我们翻回头来详细的了解一下常见的各种异步的编程模式。

回调函数
事件监听
发布/订阅模式
Promise
Generator
async/await

1.5.1 回调函数

回调函数是异步操作最基本的方法。

比如：我有一个异步操作(asyncFn)，和一个同步操作(normalFn)。

function asyncFn() {
    setTimeout(() => {        console.log(&#39;asyncFn&#39;);
    }, 0)
}function normalFn() {    console.log(&#39;normalFn&#39;);
}

asyncFn();
normalFn();// normalFn// asyncFn

如果按照正常的JS处理机制来说，同步操作一定发生在异步之前。如果我想要将顺序改变，最简单的方式就是使用回调的方式处理。

function asyncFn(callback) {
    setTimeout(() => {        console.log(&#39;asyncFn&#39;);
        callback();
    }, 0)
}function normalFn() {    console.log(&#39;normalFn&#39;);
}

asyncFn(normalFn);// asyncFn// normalFn

1.5.2 事件监听

另一种思路是采用事件驱动模式。这种思路是说异步任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

比如一个我们注册一个按钮的点击事件或者注册一个自定义事件，然后通过点击或者trigger的方式触发这个事件。

1.5.3 发布/订阅模式（又称观察者模式）

这个重点讲下，发布/订阅模式像是事件监听模式的升级版。

在发布/订阅模式中，你可以想象存在一个消息中心的地方，你可以在那里“注册一条消息”，那么被注册的这条消息可以被感兴趣的若干人“订阅”，一旦未来这条“消息被发布”，则所有订阅了这条消息的人都会得到提醒。

这个就是发布/订阅模式的设计思路。接下来我们一点一点实现一个简单的发布/订阅模式。

首先我们先实现一个消息中心。

// 先实现一个消息中心的构造函数，用来创建一个消息中心function MessageCenter(){    var _messages = {}; // 所有注册的消息都存在这里

    this.regist = function(){}; // 用来注册消息的方法
    this.subscribe = function(){};  // 用来订阅消息的方法
    this.fire = function(){};   // 用来发布消息的方法}

这里一个消息中心的雏形就创建好了，接下来我们只要完善下regist，subscribe和fire这三个方法就好了。

function MessageCenter(){    var _messages = {};    // 对于regist方法，它只负责注册消息，就只接收一个注册消息的类型(标识)参数就好了。
    this.regist = function(msgType){        // 判断是否重复注册
        if(typeof _messages[msgType] === &#39;undefined&#39;){
            _messages[msgType] = [];    // 数组中会存放订阅者
        }else{            console.log(&#39;这个消息已经注册过了&#39;);
        }
    }    // 对于subscribe方法，需要订阅者和已经注册了的消息进行绑定
    // 由于订阅者得到消息后需要处理消息，所以他是一个个的函数
    this.subscribe = function(msgType, subFn){        // 判断是否有这个消息
        if(typeof _messages[msgType] !== &#39;undefined&#39;){
            _messages[msgType].push(subFn);
        }else{            console.log(&#39;这个消息还没注册过，无法订阅&#39;)
        }
    }    // 最后我们实现下fire这个方法，就是去发布某条消息，并通知订阅这条消息的所有订阅者函数
    this.fire = function(msgType, args){    
        // msgType是消息类型或者说是消息标识，而args可以设置这条消息的附加信息

        // 还是发布消息时，判断下有没有这条消息
        if(typeof _messages[msgType] === &#39;undefined&#39;) {            console.log(&#39;没有这条消息，无法发布&#39;);            return false;
        }        var events = {
            type: msgType,
            args: args || {}
        };

        _messages[msgType].forEach(function(sub){
            sub(events);
        })
    }
}

这样，一个简单的发布/订阅模式就完成了，当然这只是这种模式的其中一种简单实现，还有很多其他的实现方式。
就此我们就可以用他来处理一些异步操作了。

var msgCenter = new MessageCenter();

msgCenter.regist(&#39;A&#39;);
msgCenter.subscribe(&#39;A&#39;, subscribeFn);function subscribeFn(events) {    console.log(events.type, events.args);
} 

// -----setTimeout(function(){
    msgCenter.fire(&#39;A&#39;, &#39;fire msg&#39;);
}, 1000);// A, fire msg

我们在这篇文章里深入讲解了什么是异步，为什么要有异步以及在JS中引擎是如何处理异步的，后面我们讲解了几种异步编程模式并重点讲了下发布/订阅模式，
在下一章里面我们重点把另外几种异步编程模式Promise，Generator，async/await讲完。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！