写篇文章,弄清楚些JavaScript的同步,异步和事件循环这些概念
一.所谓单线程:
是指在js引擎中负责解释和执行JavaScript代码的线程只有一个,也可以叫做主线程
但是实际上还有其他的线程,例如:处理ajax请求的线程,处理DOM事件的线程,定时器线程,读写文件线程等等,这些线程可能存在js引擎之内,也可能存在js引擎之外,可以交做工作线程
二.所谓同步与异步
同步:
假设存在一个函数A：
A(args...);
如果在函数A返回的时候,调用者就能够得到预期的结果(即拿到了预期的返回值或者看到了预期的效果),那么这个函数就是同步的.
例如:
Math.sqrt(2);
console.log('hi');
- 第一个函数返回时,拿到了预期的返回值:2的平方根.
- 第二个函数返回时,拿到了预期的效果:在控制台打印了一个字符串.
所以这两个函数都是同步的.
异步:
如果在函数A返回的时候,调用者还不能够得到预期的结果,而是需要在将来通过一定的手段得到,那么这个函数就是异步的.
例如:
fs.readFile('foo.text','utf-8',function(err,data){
console.log(data);
});
上述代码在fs.readFile函数返回时,我们期望的结果并不会发生,而是要等到文件全部读取完成之后.如果文件很大的话可能需要很长的时间.
下面以AJAX请求为例,看一下同步和异步的区别:
- 异步AJAX:
主线程：“你好，AJAX线程。请你帮我发个HTTP请求吧，我把请求地址和参数都给你了。”
AJAX线程：“好的，主线程。我马上去发，但可能要花点儿时间呢，你可以先去忙别的。”
主线程：：“谢谢，你拿到响应后告诉我一声啊。”
(接着，主线程做其他事情去了。一顿饭的时间后，它收到了响应到达的通知。)
- 同步AJAX:
主线程：“你好，AJAX线程。请你帮我发个HTTP请求吧，我把请求地址和参数都给你了。”
AJAX线程：“......”
主线程：：“喂，AJAX线程，你怎么不说话？”
AJAX线程：“......”
主线程：：“喂！喂喂喂！”
AJAX线程：“......”
(一炷香的时间后)
主线程：：“喂！求你说句话吧！”
AJAX线程：“主线程，不好意思，我在工作的时候不能说话。你的请求已经发完了，拿到响应数据了，给你。”
正是由于JavaScript是单线程的,而异步容易实现费阻塞,所以JavaScript中对于耗时的操作或者时间不确定的操作,使用异步就成了必然的选择!
三. 异步的构成要素
一个异步过程通常是这样的:
主线程发起一个异步请求,相应的工作线程接收到请求并且告知主线程已收到(异步函数返回);主线程可以继续执行后面的代码,同时工作线程执行异步任务;工作线程完成工作后,通知主线程;主线程收到通知后,执行一定的动作(调用回调函数).
异步函数通常具有以下的形式:
A(args...,callbackFn)
它可以叫做异步过程的发起函数,或者叫做异步任务注册函数.args是这个函数需要的参数.callbackFn也是这个函数的参数,但是它比较特殊所以单独列出来.
所以一个异步过程一般包含两个元素:
- 发起函数(注册函数)A
- 回调函数callbackFn
他们都是在主线程上调用的,其中注册函数用来发起异步过程,回调函数用来处理结果.
例子:
setTimeout(fn,1000);
其中,setTimeout就是异步过程的发起函数,fn是回调函数.
注意:前面说的形式A(args...,callbackFn)只是一种抽象的表示,并不代表回调函数一定要作为函数的参数,例如:(发起函数和回调函数就是分离的.)
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = xxx;//添加回调函数
xhr.open('GET',url);
xhr.send();//发起函数
四. 消息队列和事件循环
工作线程把消息放到消息队列,主线程通过事件循环过程去取消息.
- 消息队列: 是指先进先出的队列,它里面存放各种消息.
- 事件循环: 是指主线程重复从消息队列中取消息,执行的过程.
实际上主线程只会做一件事情.就是从消息队列里取消息,执行消息,再取消息,再执行.当消息队列为空时,就会等待直到消息队列变成非空,而且主线程只要在当前的消息执行完成后,才会去取下一个消息,这种机制就叫做时间循环机制!取一个消息并执行的过程叫做一次循环.
事件循环用代码表示大概是这样的:
while(true){
var message = queue.get();
execute(message);
}
那么队列里的消息具体指什么呢?我们可以认为:
消息就是注册异步任务时添加的回调函数.
再次以异步AJAX为例,假设存在如下代码:
$.ajax('http://jianshu.com',function(resp){
console.log('我是响应:' , resp);
})
主线程在发起AJAX请求后,会继续执行其他代码.AJAX线程负责请求jianshu.com,拿到响应后,它会把响应封装成一个JavaScript对象,然后构造一条消息:
var message = function(){
callbackFn(response);
}
其中的callbackFn就是前面代码中得到成功响应时的回调函数.
主线程在执行完当前循环中的所有代码后,就会到消息队列去除这条信息(也就是message函数),并执行它.到此为止,就完成了工作线程对主线程的通知,回调函数也就得到了执行.如果一开始主线程就没有提供回调函数,AJAX线程在收到http响应后,也就没必要通知主线程,从而也没必要往消息队列放消息.
用图表示这个过程:
结论:
异步过程的回调函数,一定不在当前这一轮事件循环中执行.
五. 异步与事件
消息队列中的每一条消息实际上都对应着一个事件.
例子:
var button = document.getElement('#btn');
button.addEventListener('click', function(e) {
console.log();
});
从事件的角度来看,上述代码表示:在按钮上添加了一个鼠标点击事件的事件监听器;当用户点击按钮时,鼠标单击事件触发,事件监听器函数被调用.
从异步过程的角看,addEventListener函数就是异步过程的发起函数,事件监听器函数就是异步过程的回调函数.事件触发时,表示异步任务完成,会将事件监听器函数封装成一条消息发放到消息队列中,等待主线程执行.
事件机制实际上就是异步过程的通知机制
另一方面,所有的异步过程也可以用事件来描述.例如:setTimeout可以看成一个时间到了!的事件.前文的函数可以看成:
timer.addEventListener('timeout',1000,fn);
从生产者与消费者的角度来看,异步过程是这样的:
工作线程是生产者，主线程是消费者(只有一个消费者)。工作线程执行异步任务，执行完成后把对应的回调函数封装成一条消息放到消息队列中；主线程不断地从消息队列中取消息并执行，当消息队列空时主线程阻塞，直到消息队列再次非空。
六. 总结
最后再用一个生活中的例子总结一下同步和异步：在公路上，汽车一辆接一辆，有条不紊的运行。这时，有一辆车坏掉了。假如它停在原地进行修理，那么后面的车就会被堵住没法行驶，交通就乱套了。幸好旁边有应急车道，可以把故障车辆推到应急车道修理，而正常的车流不会受到任何影响。等车修好了，再从应急车道回到正常车道即可。唯一的影响就是，应急车道用多了，原来的车辆之间的顺序会有点乱。
这就是同步和异步的区别。同步可以保证顺序一致，但是容易导致阻塞；异步可以解决阻塞问题，但是会改变顺序性。改变顺序性其实也没有什么大不了的，只不过让程序变得稍微难理解了一些
