JavaScript的同步,异步和事件循环

2017-08-07  本文已影响0人  风起云帆

写篇文章,弄清楚些JavaScript的同步,异步和事件循环这些概念

一.所谓单线程:

是指在js引擎中负责解释和执行JavaScript代码的线程只有一个,也可以叫做主线程

但是实际上还有其他的线程,例如:处理ajax请求的线程,处理DOM事件的线程,定时器线程,读写文件线程等等,这些线程可能存在js引擎之内,也可能存在js引擎之外,可以交做工作线程

二.所谓同步与异步

同步:
假设存在一个函数A：

A(args...);

如果在函数A返回的时候,调用者就能够得到预期的结果(即拿到了预期的返回值或者看到了预期的效果),那么这个函数就是同步的.
例如:

Math.sqrt(2);
console.log('hi');

fs.readFile('foo.text','utf-8',function(err,data){
console.log(data);
});

上述代码在fs.readFile函数返回时,我们期望的结果并不会发生,而是要等到文件全部读取完成之后.如果文件很大的话可能需要很长的时间.

下面以AJAX请求为例,看一下同步和异步的区别:

主线程：“你好，AJAX线程。请你帮我发个HTTP请求吧，我把请求地址和参数都给你了。”
AJAX线程：“好的，主线程。我马上去发，但可能要花点儿时间呢，你可以先去忙别的。”
主线程：：“谢谢，你拿到响应后告诉我一声啊。”
(接着，主线程做其他事情去了。一顿饭的时间后，它收到了响应到达的通知。)

主线程：“你好，AJAX线程。请你帮我发个HTTP请求吧，我把请求地址和参数都给你了。”
AJAX线程：“......”
主线程：：“喂，AJAX线程，你怎么不说话？”
AJAX线程：“......”
主线程：：“喂！喂喂喂！”
AJAX线程：“......”
(一炷香的时间后)
主线程：：“喂！求你说句话吧！”
AJAX线程：“主线程，不好意思，我在工作的时候不能说话。你的请求已经发完了，拿到响应数据了，给你。”

正是由于JavaScript是单线程的,而异步容易实现费阻塞,所以JavaScript中对于耗时的操作或者时间不确定的操作,使用异步就成了必然的选择!

三. 异步的构成要素

一个异步过程通常是这样的:

主线程发起一个异步请求,相应的工作线程接收到请求并且告知主线程已收到(异步函数返回);主线程可以继续执行后面的代码,同时工作线程执行异步任务;工作线程完成工作后,通知主线程;主线程收到通知后,执行一定的动作(调用回调函数).

异步函数通常具有以下的形式:

A(args...,callbackFn)

它可以叫做异步过程的发起函数,或者叫做异步任务注册函数.args是这个函数需要的参数.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响应后,也就没必要通知主线程,从而也没必要往消息队列放消息.

用图表示这个过程:

事件循环.png

结论:

异步过程的回调函数,一定不在当前这一轮事件循环中执行.

五. 异步与事件

消息队列中的每一条消息实际上都对应着一个事件.
例子:

var button = document.getElement('#btn');
button.addEventListener('click', function(e) {
    console.log();
});

从事件的角度来看,上述代码表示:在按钮上添加了一个鼠标点击事件的事件监听器;当用户点击按钮时,鼠标单击事件触发,事件监听器函数被调用.

从异步过程的角看,addEventListener函数就是异步过程的发起函数,事件监听器函数就是异步过程的回调函数.事件触发时,表示异步任务完成,会将事件监听器函数封装成一条消息发放到消息队列中,等待主线程执行.

事件机制实际上就是异步过程的通知机制

另一方面,所有的异步过程也可以用事件来描述.例如:setTimeout可以看成一个时间到了!的事件.前文的函数可以看成:

timer.addEventListener('timeout',1000,fn);

从生产者与消费者的角度来看,异步过程是这样的:

工作线程是生产者，主线程是消费者(只有一个消费者)。工作线程执行异步任务，执行完成后把对应的回调函数封装成一条消息放到消息队列中；主线程不断地从消息队列中取消息并执行，当消息队列空时主线程阻塞，直到消息队列再次非空。

六. 总结

最后再用一个生活中的例子总结一下同步和异步：在公路上，汽车一辆接一辆，有条不紊的运行。这时，有一辆车坏掉了。假如它停在原地进行修理，那么后面的车就会被堵住没法行驶，交通就乱套了。幸好旁边有应急车道，可以把故障车辆推到应急车道修理，而正常的车流不会受到任何影响。等车修好了，再从应急车道回到正常车道即可。唯一的影响就是，应急车道用多了，原来的车辆之间的顺序会有点乱。

这就是同步和异步的区别。同步可以保证顺序一致，但是容易导致阻塞；异步可以解决阻塞问题，但是会改变顺序性。改变顺序性其实也没有什么大不了的，只不过让程序变得稍微难理解了一些

上一篇下一篇

猜你喜欢

热点阅读