大家好，我是天天。今天要分享的是eventloop事件循环。这是一个老式的问题。之所以推荐，是因为用几段动画的形式把过程描述的很清楚，太有意思了。精力有限，图片不是我做的，如有侵权，一律删除~为什么需要JavaScript是单线程的：一次只能运行一个任务。通常，这没什么大不了的，但现在假设您正在运行一项需要30秒的任务。在此任务中，我们等待30秒再做其他事情（默认情况下JavaScript在浏览器的主线程上运行，因此整个UI会卡住）。这种体验是不可接受的，你不能把时间花在这么无聊的网站上。幸运的是，浏览器为我们提供了JavaScript引擎本身没有的东西：WebAPI。这包括DOMAPI、setTimeout、HTTP请求等。这可以帮助我们创建一些异步的、非阻塞的行为。第一次见面当我们调用一个函数时，它会被添加到称为调用堆栈的东西中。调用栈是JS引擎的一部分，与浏览器无关。它是一个堆栈，意味着它先进后出（想想一堆薄煎饼）。当一个函数返回一个值时，它被弹出堆栈。流程图1响应函数返回一个setTimeout函数。setTimeout是由WebAPI提供给我们的：它让我们可以在不阻塞主线程的情况下延迟任务。我们传递给setTimeout函数的回调函数，箭头函数()=>{return'Hey'}被添加到WebAPI。同时，setTimeout函数和response函数被出栈，并返回各自的值！流程图2在WebAPI中，只要我们传递给它的第二个参数（即1000毫秒），计时器就会运行。回调不会立即添加到调用堆栈，而是传递给称为队列的东西。流程图3这可能是一个令人困惑的部分：它并不意味着回调函数在1000毫秒后被添加到调用堆栈（并因此返回一个值）！它只是在1000毫秒后被添加到队列中。但它是一个队列，函数必须等待轮到它！揭幕现在是我们一直在等待的部分，现在是事件循环执行其唯一工作的时候了：将队列连接到调用堆栈。如果调用堆栈为空，如果所有先前调用的函数都已返回它们的值并已从堆栈中弹出，则将队列中的第一项添加到调用堆栈。在这种情况下，没有其他函数被调用，也就是说，当回调函数成为队列中的第一项时，调用堆栈为空。流程图4callback加入调用栈，调用，返回值，然后出栈，如图：流程图5.运行一个demo。其实看完这些动画，我就很能理解作者的思路了，不过，我还是推荐初学者，可以跑个例子看看，下面是一个很好的例子：constfoo=()=>console.log("First");constbar=()=>setTimeout(()=>console.log("Second"),500);constbaz=()=>console.log("Third");bar();foo();baz();虽然看起来很简单，嗯，你可以试试todo看一看：打开我们的浏览器，运行上面的代码，让我们快速看一下当我们在浏览器中运行这段代码时会发生什么：流程图6最后，今天的分享主要是用几个动画来回顾一下事件循环机制。
