事件循环

25 阅读1分钟

事件循环 eventLoop

一、 我们js 代码都是单线程的,从上到下依次执行,但是我们会分同步任务和异步任务。

  1. 如果是普通的js 代码,就是同步任务,如果遇到ajax settimeout等就是异步任务
  2. 遇到异步任务的时候,我们不会立马执行,会把它放到事件列表里面。
  3. 当我们的同步任务执行完了以后,就会去看事件列表里面有没有需要执行的任务,因为可能会有多个任务,这时的执行机制就叫事件循环。 二、 事件列表里面的任务等待执行的时候,就叫事件队列
  4. 这里有个区别我们的异步任务不会再循环到同步任务的主线程里面去。
  5. 而是因为主线程空了,所以来执行事件队列里面的任务。
  6. 事件循环是在不停的循环,当发现有异步任务好了,就会立即执行,比如ajax 有返回结果了,setTimeout 时间到了等。

宏任务和微任务

一 在我们的主线程中,或作说执行同步任务中,我们有宏任务和微任务的区别。

  1. 宏任务有普通js 微任务有 promise proscroo.nettext
  2. 先执行宏任务 再执行微任务
  3. 遇到微任务先标记跳过

举例

// 位置 1
setTimeout(function () {
  console.log('timeout1');
}, 1000);

// 位置 2
console.log('start');

// 位置 3
Promise.resolve().then(function () {
  // 位置 5
  console.log('promise1');
  // 位置 6
  Promise.resolve().then(function () {
    console.log('promise2');
  });
  // 位置 7
  setTimeout(function () {
    // 位置 8
    Promise.resolve().then(function () {
      console.log('promise3');
    });
    // 位置 9
    console.log('timeout2')
  }, 0);
});

// 位置 4
console.log('done');

结果是:
start
done
promise1
promise2
timeout2
promise3
timeout1

本文由mdnice多平台发布