JavaScript中EventLoop介绍


Posted in Javascript onJanuary 22, 2018

JavaScript中EventLoop介绍

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

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

有一定经验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了

JavaScript中EventLoop介绍

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

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

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

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

JavaScript中EventLoop介绍

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

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

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

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

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

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

Hi

Bye

callback

Javascript 相关文章推荐
JavaScript 继承详解(二)
Jul 13 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
node.js require() 源码解读
Dec 13 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 #Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 #Javascript
vue 项目常用加载器及配置详解
Jan 22 #Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 #Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 #jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 #jQuery
angular写一个列表的选择全选交互组件的示例
Jan 22 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
php数据库抽象层 PDO
2011/05/07 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
详解Python中for循环的使用
2015/04/14 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
办公室主任职责范文
2013/11/08 职场文书
和解协议书
2014/04/16 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
高三物理教学反思
2016/02/20 职场文书
投资入股协议书
2016/03/22 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python