美文网首页web前端面试题汇总Web前端开发
描述event-loop(事件轮询)机制

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

作者: loushumei | 来源:发表于2020-06-23 20:28 被阅读0次

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(事件轮询)机制

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

  • 成长(10/2000)——面试题合集7

    事件循环机制event-loop 事件循环机制由三部分组成:调用栈、消息队列和微任务队列。 event-loop开...

  • 运行机制event-loop(事件轮询)

    javascript为什么是单线程 为了避免复杂性(如:时有两个线程,一个线程在某个DOM节点上添加内容,另一个线...

  • 浅析 event-loop 事件轮询

    原文出自:https://www.pandashen.com 浏览器中的事件轮询 JavaScript 是一门单线...

  • 事件轮询机制

    js 单线程 alert 函数不仅会暂停主线程,而且会暂停定时器定时器回调函数只有在运行栈中的初始化代码全部执行完...

  • js事件轮询机制

    这段代码的执行顺序,根据执行顺序分析、JS事件轮询原理 执行逻辑 从代码执行角度来看 首先分析同步代码、在面的代码...

  • JavaScript 异步编程的几个方法

    原文地址基于浏览器事件轮回机制(以及nodejs中的事件轮询机制),JavaScript常常会运行在异步环境中。而...

  • 并发:事件循环 & asyncio

    1. 事件循环机制 1.1. 什么是事件循环 事件循环(Event Loop),即通过轮询方法监控事件; asyn...

  • 16.3 JavaScript的执行机制

    浏览器事件轮询机制 js执行为单线程 网络请求、setTimeout、addEventListener属于异步事件...

  • 轮询机制 事件队列

    轮询就是通常说的 event loop 而事件队列则是event loop 的具象化 话不多说 上题目 看我慢慢分...

网友评论

    本文标题:描述event-loop(事件轮询)机制

    本文链接:https://www.haomeiwen.com/subject/jthkfktx.html