javascript事件循环event loop的简单模型解释与应用分析


Posted in Javascript onMarch 14, 2020

本文实例讲述了javascript事件循环event loop的简单模型解释与应用.分享给大家供大家参考,具体如下:

js是单线程的,但是event loop的出现,使得js拥有可以处理高并发的性能。那么怎么理解event loop呢?网上百度一堆文章,什么heap,stack,micro queue,macro queue,让初学者直接懵掉。这里采用很通俗的理解方式介绍下event loop.

event loop顾名思义是事件循环,既然是循环,那循环的是什么呢?

对于一个js文件,

1,执行当前执行上下文(初次是全局作用域)的所有同步任务,有异步任务的透出

2,执行任务队列里第一个异步任务,

3,执行当前异步任务执行上下文的所有同步任务,有异步任务透出

从上面的执行顺序可以清楚的看到循环执行的是什么,event loop循环中的循环任务是指:

执行某个执行上下文的所有同步任务,透出异步任务

看一个简单实例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>event-loop-test</title>
</head>
<body>
  <script>
    setTimeout(function(){
      console.log('测试定时事件循环')
      new Promise(function(resolve,reject){
        resolve('内层数据')
      }).then(function(data){
        console.log(data)
      })
      console.log('测试测试测试111')
      for(var i = 0; i<5000; i++){
        console.log('异步任务中的耗时同步任务')
      }
      setTimeout(function(){
        console.log(22222)  //这里透出的异步任务会在testPromise之后,在上面的for循环执行过后,testPromise已经透出异步任务,放到队列中
      },0)
    },0)
    for(var i = 0; i<5000; i++){
      console.log('测试event loop')
    }
    for(var i = 0; i<5000; i++){
      console.log('测试event loop2')
    }
    var testPromise = new Promise(function(resolve,reject){
      console.log('直接测试promiseneibu')
      setTimeout(function(){
        resolve('promise测试')
        console.log('promise内部的console') 
      },10)
    })
    testPromise.then(function(data){
      console.log(data)
    })
    console.log('我是直接运行的')
  </script>
</body>
</html>

javascript事件循环event loop的简单模型解释与应用分析

由上面的实例和分析可以得出:

任务队列中的异步任务透出和循环层级是没有关系的,任务队列中的异步任务是根据透出先后顺序排列的

建立一个简单模型:

javascript事件循环event loop的简单模型解释与应用分析

 

也可以理解为:

javascript事件循环event loop的简单模型解释与应用分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
在模板页面的js使用办法
Apr 01 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 #Javascript
js实现的订阅发布者模式简单示例
Mar 14 #Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 #Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 #Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 #Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 #Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 #Javascript
You might like
咖啡的植物学知识
2021/03/03 咖啡文化
php实现留言板功能(代码详解)
2017/03/28 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
JavaScript中this的使用详解
2013/11/08 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python画图高斯分布的示例
2019/07/10 Python
Python调用JavaScript代码的方法
2020/10/27 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
《雨霖铃》听课反思
2014/02/13 职场文书
趣味比赛活动方案
2014/02/15 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
主要领导对照检查材料
2014/08/26 职场文书
2015年超市工作总结
2015/04/09 职场文书
法定代表人免职证明
2015/06/24 职场文书
小型婚礼主持词
2015/06/30 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL