Manon.icu

I'm here to make you a better developer by teaching you everything I know about building for the web.

Published 2020-05-19

事件循环

qxHyNO

JavaScript 是一种单线程的语言,意味着它只有一个调用栈和一个执行线程。当 JavaScript 执行一段代码时,它会按照代码的顺序将函数调用和表达式求值添加到调用栈中。调用栈是一种后进先出(LIFO)的数据结构,它保证了当前执行的代码是最后被添加到栈中的。

当 JavaScript 遇到异步代码时,它会将异步代码添加到任务队列中并继续执行后续代码。任务队列是一种先进先出(FIFO)的数据结构,它保证了先添加到队列中的任务会先被执行。

JavaScript 中的异步代码包括定时器、事件监听器、网络请求等。当这些异步操作完成时,它们会将回调函数添加到任务队列中。

当调用栈为空时,事件循环将从任务队列中取出一个任务并将其添加到调用栈中执行。当任务执行完成后,调用栈将被弹出,并且事件循环将继续从任务队列中取出下一个任务,直到任务队列为空。

在事件循环中,微任务队列是一种特殊类型的任务队列,它优先级高于任务队列。当任务队列中存在微任务时,事件循环将优先执行微任务队列中的任务,直到微任务队列为空。微任务包括 Promise 的回调函数和一些 DOM 操作的回调函数等。

当事件循环执行微任务时,它会一直执行微任务队列中的所有任务,直到微任务队列为空。然后它会继续从任务队列中取出下一个任务并执行,直到任务队列和微任务队列都为空。

事件循环包括以下几个主要概念:

  • 调用栈(Call Stack):调用栈是一种数据结构,它用于存储当前正在执行的函数调用的上下文信息。当一个函数被调用时,它的上下文信息被压入调用栈中,当函数执行完成时,它的上下文信息被从调用栈中弹出。
  • 任务队列(Task Queue):任务队列是一个队列,它用于存储待执行的任务。当一个任务被添加到任务队列中时,它会等待事件循环将它取出并执行。
  • 事件循环(Event Loop):事件循环是一个持续的过程,它不断地从任务队列中取出任务并执行它们。当调用栈为空时,事件循环将从任务队列中取出一个任务并将其压入调用栈中执行。
  • 微任务队列(Microtask Queue):微任务队列是一个队列,它用于存储微任务。微任务是一种特殊类型的任务,它会在当前任务执行完成后立即执行。微任务队列的优先级高于任务队列,这意味着当有微任务时,事件循环将先执行微任务队列中的所有任务,然后再执行任务队列中的任务。

事件循环的执行顺序如下:

  • 当代码开始执行时,所有同步代码都会被按顺序添加到调用栈中执行。
  • 如果遇到异步代码(例如定时器或事件监听器),则会将其添加到任务队列中并继续执行后续代码。
  • 当调用栈为空时,事件循环将从任务队列中取出一个任务并将其压入调用栈中执行。
  • 如果任务队列中有微任务,则事件循环将优先执行微任务队列中的所有任务,直到微任务队列为空。
  • 重复执行步骤 3 和步骤 4,直到任务队列和微任务队列都为空

Comments

No Comments!