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英文日期(有时间)选择器
May 02 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 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
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP实现简易计算器功能
2020/08/28 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
React实现todolist功能
2020/12/28 Javascript
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
python读写配置文件操作示例
2019/07/03 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
双十佳事迹材料
2014/01/29 职场文书
揠苗助长教学反思
2014/02/04 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
实习科室评语
2015/01/04 职场文书
拾金不昧感谢信
2015/01/21 职场文书
2015年国庆节寄语
2015/08/17 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
Nginx配置使用详解
2022/07/07 Servers