什么是Event Loop

旧城等待， 2023-03-01 12:38 54阅读 0赞

## Event Loop ##

Wikipedia这样定义：

> “Event Loop是一个程序结构，用于等待和发送消息和事件。（a programming construct that waits for and dispatches events or messages in a program.）”

**为什么出现 Event Loop**  
JavaScript是一种单线程语言，所有任务都在一个线程上完成。一旦遇到大量任务或者遇到一个耗时的任务，比如加载一个高清图片，网页就会出现"假死"，因为JavaScript停不下来，也就无法响应用户的行为。为了防止主线程的阻塞，JavaScript 有了 **同步** 和 **异步** 的概念。

**同步**

> 如果在一个函数返回的时候，调用者就能够得到预期结果，那么这个函数就是同步的。也就是说同步方法调用一旦开始，调用者必须等到该函数调用返回后，才能继续后续的行为。下面这段段代码首先会弹出 alert 框，如果你不点击 确定 按钮，所有的页面交互都被锁死，并且后续的 console 语句不会被打印出来。

alert('Yancey');
    console.log('is');
    console.log('the');
    console.log('best');

**异步**

> 如果在函数返回的时候，调用者还不能够得到预期结果，而是需要在将来通过一定的手段得到，那么这个函数就是异步的。比如说发一个网络请求，我们告诉主程序等到接收到数据后再通知我，然后我们就可以去做其他的事情了。当异步完成后，会通知到我们，但是此时可能程序正在做其他的事情，所以即使异步完成了也需要在一旁等待，等到程序空闲下来才有时间去看哪些异步已经完成了，再去执行。

setTimeout(() => { 
      console.log('yancey');
    }, 1000);
    
    for (let i = 0; i < 100000000; i += 1) { 
      // todo
    }

这里需要等到 for 循环完成才会执行 settimeout，所以时间远远超过1000毫秒

**事件循环机制 Event Loop**  
我们注意到，在异步代码完成后仍有可能要在一旁等待，因为此时程序可能在做其他的事情，等到程序空闲下来才有时间去看哪些异步已经完成了。所以 JavaScript 有一套机制去处理同步和异步操作，那就是事件循环 (Event Loop)。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]

> 用文字描述的话，大致是这样的:  
> 1.所有同步任务都在主线程上执行，形成一个执行栈 (Execution Context Stack)。  
> 2.而异步任务会被放置到 Task Table，也就是上图中的异步处理模块，当异步任务有了运行结果，就将该函数移入任务队列。  
> 3.一旦执行栈中的所有同步任务执行完毕，引擎就会读取任务队列，然后将任务队列中的第一个任务压入执行栈中运行。  
> 主线程不断重复第三步，也就是 只要主线程空了，就会去读取任务队列，该过程不断重复，这就是所谓的 事件循环。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNTkzMjQ5MTA2_size_16_color_FFFFFF_t_70]: /images/20230208/f7b7112baf7746ef926843f961cd4b33.png