EventLoop事件循环以及异步代码执行过程

1.EventLoop事件循环

首先我们需要了解JavaScript是一门什么类型的语言,以及同步代码,异步代码的执行过程。

1.1JS

JavaScript 是一门单线程执行的语言,简单来说就是,同一时间只能做一件事情。

1.2JS执行环境

Js需要在宿主环境中执行(浏览器,nodejs),浏览器内部有执行js代码的引擎(V8引擎)。一般讨论的是JS在浏览器中的事件循环。

 JS为了代码的执行不阻塞,又分为同步代码和异步代码,同步代码会在执行栈中立即执行,异步代码会委托浏览器执行,将回调函数放入到任务队列中。

当事件(用户的点击,图片的成功加载)发生时,将其回调添加到任务队列;主线程上的任务完成之后,执行过程不会停止,任务队列中的回调函数会依次调入主线程中执行,主线程执行任务又在任务队列拿任务的过程称为‘事件循环’。

2.异步代码执行过程

2.1微任务,宏任务

异步代码不会立即执行,而是会被宿主环境将回调函数放入到任务队列中排队,等待主线程执行完同步代码,任务队列中的异步代码才会被执行。

任务队列又分微任务队列,宏任务队列

微任务:1.promise.then() 2.async,await

宏任务:1.<script>  2.定时器 3.DOM事件 4.ajax

主线程执行完同步代码,优先从任务队列拿去微任务执行,也就是说,异步代码执行中,微任务可以插宏任务的队。

3.练习题

<script>
    console.log(1);
    async function fnOne() {
      console.log(2);
      await fnTwo(); // 右结合先执行右侧的代码, 然后等待
      console.log(3);
    }
    async function fnTwo() {
      console.log(4);
    }
    fnOne();
    setTimeout(() => {
      console.log(5);
    }, 2000);
    let p = new Promise((resolve, reject) => { // new Promise()里的函数体会马上执行所有代码
      console.log(6);
      resolve();
      console.log(7);
    })
    setTimeout(() => {
      console.log(8)
    }, 0)
    p.then(() => {
      console.log(9);
    })
    console.log(10);
</script>

 <script>
    console.log(11);
    setTimeout(() => {
      console.log(12);
      let p = new Promise((resolve) => {
        resolve(13);
      })
      p.then(res => {
        console.log(res);
      })
      console.log(15);
    }, 0)
    console.log(14);
  </script>

执行过程梳理:

 

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值