描述event-loop(事件轮询)机制

event loop是什么?

JS是单线程运行的.
异步要基于回调来实现.
event loop就是异步回调的实现原理

event loop执行过程

event loop
Browser console 浏览器打印窗口    
Call Stack 调用栈.    
Web APIs 处理定时或异步的API.  
Event Loop 事件轮询.   
Callback Queue 回调函数队列.  

实例:

console.log('Hi');
setTimeout(function cb1() {
    console.log('callback!')
}, 5000);
console.log('Bye')

event loop 过程:
同步代码,一行一行放在 Call Stack 执行.
遇到异步,先“记录”下,等待时机(定时、网络请求等).
时机到了,就移动到 Callback Queue
如果 Call Stack 为空(即同步代码执行完),Event Loop 开始工作.
轮询查找 Callback Queue,如有则移动到 Call Stack 执行.
然后继续轮询查找(永动机一样)

DOM事件与event loop的关系

实例:

console.log('Hi');
$('#btn1').click(function(e){
    console.log('button clicked!')
})
setTimeout(function cb1() {
    console.log('callback!')
}, 5000);
console.log('Bye')
DOM事件在event loop的执行:

同步代码,一行一行放在 Call Stack 执行.
遇到点击事件 ,将点击事件的函数放在 Web APIs ,等待执行.
所有的同步代码执行完,当callStack空了 同步执行结束,
浏览器启动 Event Loop 机制,
开始轮询 Callback Queue
当用户触发点击事件,将Web APIs的 函数推到 Callback Queue.
Event Loop 机制在 Callback Queue 中找到了函数,
并将函数 推到了 Call Stack 中执行函数内容

异步(setTimeout、ajax)等回调,基于Event Loop实现.
DOM事件也使用回调,基于Event Loop实现

你可能感兴趣的:(描述event-loop(事件轮询)机制)