执行settimeout后要清理吗_【重识前端】一次搞定JavaScript的执行机制

最近在写【重拾前端】系列，下面有几个快速通道，大家自取

【重识前端】原型/原型链和继承

【重识前端】闭包与模块

【重识前端】全面攻破this

【重识前端】一次搞定JavaScript的执行机制

【重识前端】什么是BFC、IFC、GFC 和 FFC

【重识前端】深入内存世界

【重识前端】暴走的异步编程

前言

事件循环这个事情，其实在我们的工作中或多或少都会碰到，可能我们只是没有去认认真真的理解他，了解他而已。今天我们一起把事件循环吃透。

单线程的JS

其实，事件循环就是对于单线程的JS应运而生的。

• 单线程？什么是线程，诶，我好像听过进程诶，他们两兄弟啥区别？
• 为什么js一定要单线程啊，我听说CPU不是有很多核吗？为什么不多线程？

线程和进程的爱恨纠葛

这里我推荐阮一峰老师的一篇文章

点我学习

为什么JS是单线程？

这个要回到Js历史了，布兰登·艾奇(Brendan Eich)老哥用10天创造js。当时js用来干嘛，简单的浏览器交互，验证，操作一下dom是吧。那把它设计成那么复杂干什么，而且如果多线程的话，操作dom会出现麻烦的事情，假设一个线程读取DOM节点数据的同时，另一个线程把那个DOM节点删了，呵呵。所以js一个线程就够了，也就是一步一步顺序运行下来。

浏览器中的消息队列和事件循环

这里暂时只说浏览器中的循环事件循环，有关node的话可能有些细微的差别，不过底层的原理都是差不多的。

注意

这里主要是从一个设计者的角度来模拟，从零构建浏览器中的时间循环。为了能让你更加深刻地理解事件循环机制，我们就从最简单的场景来分析，然后带你一步步了解浏览器页面主线程是如何运作的。

开始

事先约定好的执行顺序

假如我有以下几个任务

var num1 = 1+2; // 任务 1
var num2 = 20/5; // 任务 2
var num3 = 7*8; // 任务 3
console.log(num1, num2, num3)； // 任务 4

如果让我来设计，我就会有一个主线程，然后把他们按顺序排进去，然后顺序执行。

function mainThread(){
    
  var num1 = 1+2; // 任务 1
  var num2 = 20/5; // 任务 2
  var num3 = 7*8; // 任务 3
  console.log(num1, num2, num3)； // 任务 4
}

，我们已经设计了最简单的线程啦。

线程运行中，处理突发事件

很多时候，所有的任务不是之前就统一安排好的，比如⌨️的输入， 的点击等等。

如果想要在线程运行中可以很好的处理这些事件。就需要

====>事件循环。这里我们用while来实现简单的事件循环

function awaitt() {
    
  return new Promise(resolve => {
    
    document.a