美文网首页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(事件轮询)机制

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