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 继承机制实例
Aug 12 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
PHP中函数内引用全局变量的方法
2008/10/20 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
[JS]点出统计器
2020/10/11 Javascript
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python变量赋值的秘密分享
2018/04/03 Python
基于Python log 的正确打开方式
2018/04/28 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Python几种常见算法汇总
2020/06/02 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
六五普法规划实施方案
2014/03/21 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
个人承诺书怎么写
2014/05/24 职场文书
学校志愿者活动总结
2014/06/27 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
2014年村委会工作总结
2014/11/24 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
使用Python开发冰球小游戏
2022/04/30 Python
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS