JS 非同期プログラミングの概要

この記事では主にJS非同期プログラミングの入門を紹介していますので、必要な友達は参考にしてください

1.1 非同期とは何ですか

。

同期は 1 つのことの実行です。次のタスクは、前のタスクが実行された後にのみ実行できます。そして 同步(sync)而言的，很好理解。

同步就是一件事一件事的执行。只有前一个任务执行完毕，才能执行后一个任务。而异步比如：

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

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

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

setTimeout就是一个异步任务，当JS引擎顺序执行到setTimeout的时候发现他是个异步任务，则会把这个任务挂起，继续执行后面的代码。直到1000ms后，回调函数cbFn才会执行，这就是异步，在执行到setTimeout的时候，JS并不会傻呵呵的等着1000ms执行cbFn回调函数，而是继续执行了后面的代码。

1.2 为啥要在JS中使用异步

由于javascript是单线程的，只能在JS引擎的主线程上运行的，所以js代码只能一行一行的执行，不能在同一时间执行多个js代码任务，这就导致如果有一段耗时较长的计算，或者是一个ajax请求等IO操作，如果没有异步的存在，就会出现用户长时间等待，并且由于当前任务还未完成，所以这时候所有的其他操作都会无响应。

1.3 那为啥JS不设计成多线程的

这主要跟javascript的历史有关，js最开始只是为了处理一些表单验证和DOM操作而被创造出来的，所以主要为了语言的轻量和简单采用了单线程的模式。多线程模型相比单线程setTimeout は、非同期タスクエンジン setTimeout が順次実行され、非同期タスクであることが判明した場合、タスクは一時停止され、後続のコードが実行され続けます。コールバック関数 cbFn は 1000 ミリ秒後まで実行されません。これは非同期です。setTimeout が実行されると、JS は cbFn コールバック関数の実行を 1000 ミリ秒待つことはなく、次のコードを実行し続けます。

1.2 JS で非同期を使用する理由🎜🎜🎜JavaScript が シングルスレッド。 js コードは 1 行ずつのみ実行でき、複数の js コード タスクを同時に実行することはできません。これは、長い計算や、ajax リクエストなどの IO 操作がある場合、非同期がない場合、ユーザーは長時間待機することになり、現在のタスクが完了していないため、この時点では他のすべての操作が応答しなくなります。 🎜🎜🎜1.3 では、なぜ JS はマルチスレッドになるように設計されていないのですか🎜🎜🎜 これは主に JavaScript の歴史に関係しています。js は元々、フォーム検証と DOM 操作を処理するために作成されたため、主に JavaScript の軽量化を目的としています。 シングルスレッド モード。 async/await は、非同期プログラミングを新たな段階に導きます。 Generator函数；ES7中，async/await更是将异步编程带入了一个全新的阶段。

这些异步模式我们会在后面详细来说，这里我们有个概念就好。

---

1.4 JS如何实现异步

具体JS是如何实现异步操作的呢？

答案就是JS的事件循环机制(Event Loop)。

具体来说：

当JS解析执行时，会被引擎分为两类任务，同步任务（synchronous） 和 异步任务（asynchronous）。

对于同步任务来说，会被推到执行栈按顺序去执行这些任务。
对于异步任务来说，当其可以被执行时，会被放到一个 任务队列（task queue） 里等待JS引擎去执行。

当执行栈中的所有同步任务完成后，JS引擎才会去任务队列里查看是否有任务存在，并将任务放到执行栈中去执行，执行完了又会去任务队列里查看是否有已经可以执行的任务。这种循环检查的机制，就叫做事件循环(Event Loop)

これらの非同期モードについては後ほど詳しく説明しますが、ここには概念があります。 🎜

---

🎜

1.4 非同期 JS を実装する方法

🎜 JS はどのように非同期操作を実装しますか? 🎜🎜答えは、JS イベント ループ機構 (イベント ループ)。 🎜🎜具体的には:🎜🎜JS が解析されて実行されると、エンジンによって 2 種類のタスクに分割されます。サイズ: 0.85 em; フォントファミリー: Consolas、Inconsolata、等幅; パディング: 0px 0.3em; ホワイトスペース: 1px ソリッド #f8f8f8 ; 表示: inline">同期タスク (同期) および 非同期タスク (非同期) 。 🎜🎜同期タスクの場合、これらのタスクを順番に実行するために実行スタックにプッシュされます。
非同期タスクの場合、実行できる場合は、タスク キュー が JS エンジンの実装を待機しています。 🎜🎜実行スタック内のすべての同期タスクが完了すると、JS エンジンはタスクキューに移動してタスクがあるかどうかを確認し、実行が完了するとタスクを実行スタックに入れます。タスクキューに追加して、実行可能なタスクがすでに存在するかどうかを確認します。このループ チェック メカニズムは イベント ループ。 🎜

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

 

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

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

Event Loop的执行顺序是：

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

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

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

4. 回到第二步。

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

我们举个例子：

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

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

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

最后的执行结果是：

• // 执行同步任务

• // 我是第一个微任务

• // 我是第一个宏任务

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

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

• // 我是第二个宏任务

---

1.5 JS异步编程模式

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

• 回调函数

• 事件监听

• 发布/订阅模式

• Promise

• Generator

• async/await

1.5.1 回调函数

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

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

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

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

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

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

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

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

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

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

var msgCenter = new MessageCenter();

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

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

 

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

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

相关推荐：

JavaScript Error对象的解析

小程序中使用ECharts 异步加载数据

以上がJS 非同期プログラミングの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。