JavaScript中EventLoop介绍

网络编程 2024/11/17 佚名

3 1 2

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

这一般情况下还不会有大问题，但是当浏览器在同时运行多个类似的算法时，这个问题就很严重了。

有一定经验js开发人员大多都理解代码的异步执行，特别是ajax的使用。

// ajax(..) is some arbitrary Ajax function given by a library
var response = ajax('https://example.com/api');
console.log(response);
// `response` won't have the response

这里response 将不会得到你想要的结果。

而是需要像相面这样，通过 callback函数的方式，获取结果

ajax('https://example.com/api', function(response) {
  console.log(response); // `response` is now available
});

另外这里面提醒一下,下面的代码， async: false永远都不是一个好主意。

// This is assuming that you're using jQuery
jQuery.ajax({
  url: 'https://api.example.com/endpoint',
  success: function(response) {
    // This is your callback.
  },
  async: false // And this is a terrible idea
});

通过上面的例子，我们应该理解通过异步函数，可以帮助我们解决类似浏览器阻塞问题。

当然还可以通过 setTimeout(callback, milliseconds)实现同样的逻辑。如果你理解了异步，下面代码执行会输出什么呢？

function first() {
  console.log('first');
}
function second() {
  console.log('second');
}
function third() {
  console.log('third');
}
first();
setTimeout(second, 1000); // Invoke `second` after 1000ms
third();

那个这下异步处理机制的原理是什么呢？这里就要引入我们的事件循环Event Loop了

Event Loop有一个简单的Job(task) - 监视Call Stack和Callback Queue。如果调用堆栈为空，它将从队列中取出第一个事件，并将其推送到调用堆栈，从而有效地运行它。

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

console.log('Hi');
setTimeout(function cb1() { 
  console.log('cb1');
}, 5000);
console.log('Bye');

执行这段代码，下面的调用栈清楚的演示了事件循环的处理流程。

请注意，setTimeout（...）不会自动将您的回调放在事件循环队列中。

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

有很多关于开始使用JavaScript中的异步代码的文章和教程，建议您使用setTimeout（callback，0）。
现在你知道Event Loop是怎么做的，以及setTimeout是如何工作的。

你就能更好的理解下面的代码

console.log('Hi');
setTimeout(function() {
  console.log('callback');
}, 0);
console.log('Bye');

尽管等待时间设置为0 ms，但浏览器控制台中的结果如下所示：

Bye

callback

JavaScript,EventLoop

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“JavaScript中EventLoop介绍”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

JavaScript中EventLoop介绍

浅谈ajax在jquery中的请求和servlet中的响应

js和jQuery以及easyui实现对下拉框的指定赋值方法

评论“JavaScript中EventLoop介绍”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接