JavaScript中的事件循环介绍

想象一下，比如浏览器在运行复杂的图像转换算法，因为是单线程，所以浏览器进程被阻塞，无法渲染界面或者运行其他代码，你的应用界面就会失去与用户的交互。

一般这不是什么大问题，但是当浏览器同时运行几个类似的算法时，这个问题就很严重了。

大多数有经验的js开发人员都了解异步代码执行，尤其是ajax的使用。

//ajax(.)是library var response=Ajax(' https://example.com/API ')给出的一些任意Ajax函数；console.log(响应)；//`response '在这里不会有回应，回应不会得到你想要的结果。

相反，你需要通过像照片这样的回调函数来获得结果。

ajax('https://example.com/api '，函数(response){ console . log(response)；//`response `现在可用})；此外，它提醒我下面的代码async: false从来都不是一个好主意。

//这是假设您使用的是jquery jquery . Ajax({ URL : ' https://API . example.com/endpoint '，success:函数(response) { //这是您的回调。}，async: false //而且这是一个可怕的想法})；通过上面的例子，我们应该明白异步函数可以帮助我们解决类似的浏览器阻塞问题。

当然，同样的逻辑也可以通过settimeout(回调，毫秒)来实现。如果你理解异步，下面的代码会输出什么？

function first(){ console . log(' first ')；} function second(){ console . log(' second ')；}函数third(){ console . log(' third ')；} first()；setTimeout(秒，1000)；//在1000msthird()之后调用“second异步处理机制的原理是什么？这里我们将介绍我们的事件循环事件循环

事件循环有一个简单的作业(任务)——监控调用堆栈和回调队列。如果调用堆栈为空，它将从队列中取出第一个事件，并将其推送到调用堆栈，从而有效地运行它。

这个迭代在事件循环中被称为Tick。每个事件只是一个函数回调。

console . log(' Hi ')；setTimeout(函数cb1(){ console . log(' cb1 ')；}, 5000);控制台日志(“再见”)；通过执行这段代码，下面的调用栈清楚地演示了事件循环的处理流程。

请注意，setTimeout(.)不会自动将回调放入事件循环队列中。

它设置了一个计时器。当计时器到期时，浏览器会将您的回调放入事件循环中，以便执行一些未来的滴答。但是，其他事件可能已经添加到队列中-您的回调不会立即执行。

有很多关于开始在JavaScript中使用异步代码的文章和教程，建议您使用setTimeout(回调，0)。现在您知道了事件循环是如何工作的，以及setTimeout是如何工作的。

您可以更好地理解以下代码

console . log(' Hi ')；setTimeout(function(){ console . log('回调'))；}, 0);控制台日志(“再见”)；虽然等待时间设置为0毫秒，但浏览器控制台中的结果如下：

你好

再见

回收