一、Event loop是什么
1、是一种处理问题的机制
2、是js引擎处理异步任务的机制
js引擎的运行机制可以通过下图简单说明，同步任务排列在主线程中，异步任务（可以理解为回调函数）排列在任务队列中，只有主线程中的同步任务执行完毕，任务队列中的异步任务才会进入主线程中执行，当主线程开始执行异步任务，就是执行对应的回调函数。这种运行机制就叫做Event loop。而Event loop（事件循环）这种说法的由来则是因为主线程从任务队列中读取事件是个不断循环的过程。
Event loop.png
二、为什么要理解Event loop
理解Event loop能够使我们更好地理解和分析js的异步任务的次序问题。
三、在代码中理解Event loop
1、这是一段包含 ajax请求异步操作的代码段
const request = new XMLHttprequest();
request.onload = function(){
if (request.status == 200){
console.log(request.responseText);
}
}; //定义回调函数
request.open('GET',url); //设置请求参数
request.send(); //发送请求
你会发现，这个代码段中open和send方法在onload之后，request.send()是浏览器向服务器发送请求，是个异步操作，而request.onload是异步请求的回调函数。所以及时open和send在onload之后，依然在主线程中优先执行，onload定义的回调函数排在任务队列中，等待主线程中的任务执行完毕才执行。
2、这是一段包含定时器setTimeout的代码段
setTimeout（function(){
console.log("定时器内部");
},100）；
console.log("定时器之外");
上述代码很容易理解，一定是先打印“定时器之外”，再打印"定时器内部"。
但是如果换成
setTimeout（function(){
console.log("定时器内部");
},0）；
console.log("定时器之外");
将定时器的延迟时间设为0，是否会优先执行定时器内部的语句？事实证明，依然是优先执行定时器外部的console语句。setTimeout()将第一个参数定义的回调函数插入任务队列，即使第二个参数设置的时间为0，也要在主线程中的任务执行完毕并且任务队列中排在该回调函数之前的其他任务执行完毕才执行setTimeout的回调函数。总而言之，setTimeout第一个参数的回调函数的执行时机通常都是比第二个参数设置的延迟时间还要久。
参考：
https://segmentfault.com/a/1190000013861128
http://www.ruanyifeng.com/blog/2014/10/event-loop.html
网友评论