js中事件循环

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

js单线程机制

• 同一时间下 js只能执行一个线程

事件循环基础

• 宏任务
  • script(整体代码)
    • 任何定义在script元素中的函数拥有一个跨当前文档的全局范围
  • setTimeout
    • 该方法挂载在window上
    • setTimeout() 方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。
  • setInterval
    • 该方法挂载在window上
    • setInterval() 方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟
  • setImmediate
    • 该方法挂载在window上
    • 该方法用来把一些需要长时间运行的操作放在一个回调函数里，在浏览器完成后面的其他语句后，就立刻执行这个回调函数
    • 新特性 不建议在生产环境中使用
  • IO
    • 文本流
  • UI rendering
    • 用户界面呈现
• 微任务
  • promise
    • 解决异步回调的新方法
  • Obeject.observe
    • 各类观察函数方法
  • MutationObserve
    • 观察者 监测dom变化
• 任务优先级
  • promise.nextTick > promise.then > setTimeout > setImmediate

代码示例

        // 宏任务
        setTimeout(()=> {
            console.log(2)
        })
    
        // 微任务
        new Promise((resolve,reject)=> {
            console.log(3)
            resolve()
            console.log(4)
        }).then(()=> {
            // 异步任务
            console.log(5)
        })

        console.log(8)

• 执行顺序

事件循环 图例

代码示例

    
        console.log('script start')

        // 宏任务
        setTimeout(()=> {
            console.log('setTimeout')
        })

        // 微任务1 跟在宏任务后面
        Promise.resolve().then(() => {
            // 微任务2 跟在宏任务后面
            console.log('promise1')
        }).then(()=> {
            // 微任务3 跟在宏任务后面
            console.log('promise2')
        })

        console.log('script end')

总结

• 今日小知识 get~