手机版

JavaScript中的事件循环介绍

时间:2021-09-01 来源:互联网 编辑:宝哥软件园 浏览:

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

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

大多数有经验的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毫秒,但浏览器控制台中的结果如下:

你好

再见

回收

版权声明:JavaScript中的事件循环介绍是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。