1、先说同步编程
就是一件事一件事的执行,只有执行完当前任务,才会执行后一个任务。
2、异步编程
例如:
setTimeout(function fn(){
console.log("Hello JS");
},1000);
console.log('sync things');
setTimeout就是一个异步任务,当JS引擎执行到setTimeout的时候发现它是个异步任务,则会把这个任务挂起,继续执行后面的代码。知道1000ms后,回调函数fn 才会执行,这就是异步。
3、为啥JS要使用异步
因为javascri是单线程的,只能在JS引擎的主线程上运行,所以js代码只能一行一行的执行。不能在同一时间执行多个js代码任务。
如果有一段耗时较长的计算,或是ajax请求等IO 操作,如果没有异步的存在,就会出现用户长时间等待。
由于当前任务还未完成,所以这时候所有其他的操作1都会无响应。
4、为何不用多线程
这主要跟javasc的设计初衷有关,刚开始只是为了处理一些表单验证和DOM操作而创立的,为了语言的轻便和简单采用了单线程。
5、常见的异步模式
- 回调函数
- 事件监听
- 发布/订阅模式(又称观察者模式)
- promise
后来ES6中引入了Generator函数;ES7中,async/qwait将异步编程带入了一个全新阶段
6、JS如何实现的异步
因为JS的事件循环机制(Event Loop)。
具体来说:
当JS解析执行时,会被引擎分为两类任务,同步任务(synchronous)和异步任务(asynchronous)。
对于同步任务来说,会被推到执行栈按顺序执行这些任务。
对于异步任务来说,当其可以被执行时,会被放到一个 任务队列 (task queue)里等待JS引擎去执行。
当执行栈中的所有同步任务完成后,JS引擎才会去任务队列里查看是否有任务存在,并将任务放到执行栈中去执行,执行完了又会去任务队列里查看是否有已经可以执行的任务。
这种循环机制,就叫做事件循环。
对于任务队列,还有更详细的分类,分为: 微任务(microtask)队列 和 宏任务(macrotask)队列
宏任务: setTimeout、setInterval等,会被放在宏任务(macrotask)队列。
微任务: Promise的then、Mutation Observer等,会被放在微任务(microtask)队列。
Event Loop的执行顺序是:
首先执行执行栈里的任务。
执行栈清空后,检查微任务(microtask)队列,将可执行的微任务全部执行。
取宏任务(macrotask)队列中的第一项执行。
回到第二步。
注意: 微任务队列每次全执行,宏任务队列每次只取一项执行。
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('执行同步任务');
最后的执行结果是:
// 执行同步任务
// 我是第一个微任务
// 我是第一个宏任务
// 我是第一个宏任务里的第一个微任务
// 我是第一个宏任务里的第二个微任务
// 我是第二个宏任务
7、JS异步编程模式
这里我们已经知道了JS中异步的运行机制,我们翻回头来详细的了解一下常见的各种异步的编程模式。
- 回调函数
- 事件监听
- 发布/订阅模式
- Promise
- Generator
- async/await
7.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
7.2 事件监听
另一种思路是采用事件驱动模式。这种思路是说异步任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
比如一个我们注册一个按钮的点击事件或者注册一个自定义事件,然后通过点击或者trigger的方式触发这个事件。
7.3 发布/订阅模式(又称观察者模式)
这个重点讲下,发布/订阅模式像是事件监听模式的升级版。
在发布/订阅模式中,你可以想象存在一个消息中心的地方,你可以在那里“注册一条消息”,那么被注册的这条消息可以被感兴趣的若干人“订阅”,一旦未来这条“消息被发布”,则所有订阅了这条消息的人都会得到提醒。
这个就是发布/订阅模式的设计思路。接下来我们一点一点实现一个简单的发布/订阅模式。
首先我们先实现一个消息中心。
这个重点讲下,发布/订阅模式像是事件监听模式的升级版。
在发布/订阅模式中,你可以想象存在一个消息中心的地方,你可以在那里“注册一条消息”,那么被注册的这条消息可以被感兴趣的若干人“订阅”,一旦未来这条“消息被发布”,则所有订阅了这条消息的人都会得到提醒。
这个就是发布/订阅模式的设计思路。接下来我们一点一点实现一个简单的发布/订阅模式。
首先我们先实现一个消息中心。
这里一个消息中心的雏形就创建好了,接下来我们只要完善下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
转自:https://www.cnblogs.com/learninpro/p/9166356.html
下篇:https://www.cnblogs.com/learninpro/p/9271813.html