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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
关于JavaScript轮播图的实现
Nov 20 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
PHP数据类型之布尔型的介绍
2013/04/28 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
php7性能提升的原因详解
2019/10/13 PHP
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
Vue表单实例代码
2016/09/05 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
Python networkx包的实现
2020/02/14 Python
什么是Python中的顺序表
2020/06/02 Python
PyTorch的torch.cat用法
2020/06/28 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
Python 图片处理库exifread详解
2021/02/25 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
Gap英国官网:Gap UK
2018/07/18 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
探矿工程师自荐信
2014/01/24 职场文书
创新型城市实施方案
2014/03/06 职场文书
校庆活动策划方案
2014/06/05 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
2015年信访工作总结
2015/04/07 职场文书
货款欠条范本
2015/07/03 职场文书
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL