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 相关文章推荐
js获取当前select 元素值的代码
Apr 19 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
原生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
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
FCK调用方法..
2006/12/21 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python生成lmdb格式的文件实例
2018/11/08 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
烈士陵园观后感
2015/06/08 职场文书
旗帜观后感
2015/06/08 职场文书