事件循环是每个JavaScript开发者必须掌握的知识。当你开始学习的时候，可能理解起来有点混乱。但我是一个视觉学习者，所以我想我会尝试用低分辨率的gif来直观地解释它，以帮助您更好地学习和理解事件循环。首先，什么是事件循环，为什么要学习它？JavaScript是单线程的：一次只能运行一个任务。通常你不会认为这有什么大不了的，但假设你正在运行一个需要30秒的任务，并且在该任务期间我们等待30秒以等待任何其他事情发生（JavaScript默认在浏览器的主线程上运行，所以整个用户界面都卡住了），但是，我认为没有人想要一个缓慢而不稳定的网站。幸运的是，浏览器为我们提供了JavaScript引擎本身无法提供的东西：WebAPI。这包括DOMAPI、setTimeout、HTTP请求等。这可以帮助我们创建一些异步的、非阻塞的行为。当我们调用一个函数时，它被添加到调用堆栈中。调用堆栈是JS引擎的一部分，它不是特定于浏览器的，它是一个堆栈，这意味着它先进后出（想想一堆煎饼）。当一个函数返回一个值时，它被弹出堆栈。响应函数返回一个setTimeout函数。setTimeout是WebAPI给我们的：它允许我们在不阻塞主线程的情况下延迟任务。我们传递给setTimeout函数的回调函数，箭头函数()=>{return'Hey'}被添加到WebAPI。同时，setTimeout函数和respond函数被出栈，并且都返回了各自的值！在WebAPI中，计时器运行的时间与我们传递给它的第二个参数一样长，即1000毫秒。回调不会立即添加到调用堆栈，而是传递给称为队列的东西。这可能是令人困惑的部分：这并不意味着回调函数在1000毫秒后被添加到调用堆栈（并因此返回一个值）！它只是在1000毫秒后添加到队列中。但它是一个队列，函数必须等待轮到它！现在，我们一直在等待的部分......事件循环完成其唯一任务的时间：将队列与调用堆栈连接起来！如果调用堆栈为空，那么，如果所有先前调用的函数都返回了它们的值并已从堆栈中弹出，则将队列中的第一项添加到调用堆栈中。在这种情况下，没有其他函数被调用，这意味着当回调函数成为队列中的第一项时，调用堆栈为空。回调被添加到调用堆栈，被调用，返回一个值，然后从堆栈中弹出。读一篇文章很有趣，但只有一遍又一遍地实际做才能完全理解学习。如果我们运行以下命令，尝试找出记录到控制台的内容：让我们快速看一下当我们在浏览器中运行这段代码时会发生什么：我们调用bar.bar返回一个setTimeout函数。我们传递给setTimeout的回调被添加到WebAPI，setTimeout函数和bar从调用堆栈中弹出。计时器在调用foo时运行并记录First。foo返回（未定义），调用baz，并将回调添加到队列中。baz日志第三。事件循环看到baz返回后调用堆栈为空，之后将回调添加到调用堆栈。回调记录二．综上所述，以上就是我和大家分享的关于事件循环的内容，希望能让大家对事件循环的学习感到轻松和有趣！如果它看起来仍然令人困惑，请不要担心，最重要的是了解某些错误/行为可能来自何处，以便有效地搜索正确的解决方案。如果你觉得今天的内容对你有用，记得点赞，关注我，分享给你的朋友，说不定能帮到他。最后，感谢您的阅读，祝您编程愉快！
