浅谈 Event Loop

以前看了一篇关于 Event Loop的文章 作了下面的笔记 

 

Event Loop 是解决JavaScript 单线程问题的一种运行机制 

 

当程序接受到了请求以后. 就会把请求交给Event Loop 而后继续往下执行 这样就不用等待请求返回,继续执行下面的代码, 当Event Loop完成后会把结果返回给程序 程序再调用已经设定好的回调函数,完成任务

可是就会出现了以下的问题

1. 程序继续往下跑是一个进程 那Event Loop跑的难道不是另外一个线程吗?
2. 若是Event Loop 接受到不少个请求, 那是按什么顺序去执行?
3. Event Loop 完成后把结果返回给程序, 程序是马上执行吗? 正在执行的代码怎么办?

而后我在 stackoverflow 上看到 “Understanding the Event Loop”和 tuts+ 里的 “Event-Based Programming: What Async Has Over Sync”

下面是我对Event Loop的我的理解 

 

像 tuts+ 里说的 “the Event Loop is a queue of callback functions.”

 

JavaScript执行程序, 当执行到 异步代码(async code) 的时候, 会把回调函数放在Event Loop里,而后继续往下执行, 当区块中的其余所有代码执行完以后, 再去执行Event Loop里面的回调函数.

 

怎么验证呢, 咱们使用JavaScript里最基础的异步函数 setTimeout()

console.log('a');
setTimeout(function() {
    console.log('b');
}, 0);
console.log('c');

没错 输出为 a c b 这就能够证实上面所说的 回调函数输出b 但必定要等区块里的其余代码执行完后, 才能够执行 再看一个例子

console.log('a');
test();
console.log('c');

function test() {
    console.log('d');
    setTimeout(function() {
        console.log('b');  
    }, 0);
    console.log('e');                  
}

输出 a d e c b 这下就更清楚明白了 因此Event Loop其实并非另外一个线程 只是一个放回调函数的队列 等待线程去执行 那就解决了上面的两个问题了, 还有一个问题, 若是Event Loop里有不少回调函数 他们执行的顺序又是怎样呢 咱们先来看一个例子

setTimeout(function() {
    console.log('a');
}, 20);

setTimeout(function() {
    console.log('b');
}, 10);

setTimeout(function() {
    console.log('c');
}, 30);

输出是 b a c 这样看起来Event Loop里好像没有什么固定顺序可言 但实际上, Event Loop里是一个先进先出的队列(FIFO) 先放进去的回调函数会先拿出来执行.

 

以上就是我对Event Loop的理解

固然还有革命性的Ajax

xmlhttp.open( "GET", "some/ur/1", true );
xmlhttp.onreadystatechange = function( data ) {
    if ( xmlhttp.readyState === 4 ) {
        console.log( data );
    }
};
xmlhttp.send( null );

底层 XmlHttpRequest(XHR)对象发送请求, 回调函数去处理XHR的readystatechange事件, 当XHR的send方法执行的时候, XHR就开始工做, 内部的readystatechange事件就触发使readystate属性变化, 而且只有当XHR完成从远端服务器接收回应, 回调函数才开始执行.

 

更新: 整个浏览器能够说就是下面的这张图

 

Heap :  用来存放变量

Stack :  用来执行 JavaScript   (只会执行位于stack里顶部的代码)

Web API :  执行DOM XMLHttpRequest setTimeout等 执行完后把回调函数放在callback queue里

　　　　　 https://developer.mozilla.org/en-US/docs/Web/API

Event loop : 只有当stack为空而且 callback queue里有回调函数的时候 才会把callback queue里的函数代码放到stack里执行

 

 

参考资料: http://stackoverflow.com/questions/21607692/understanding-the-event-loop

　　　　  http://code.tutsplus.com/tutorials/event-based-programming-what-async-has-over-sync--net-30027　　

               http://www.ruanyifeng.com/blog/2013/10/event_loop.html?from=ourjs.com

 

 

若有错误 欢迎指正 : )