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验证表单大全
Nov 25 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
原生js封装的ajax方法示例
Aug 02 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 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配置文件中最常用四个ini函数
2007/03/19 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
深入理解Python变量与常量
2016/06/02 Python
基于Python的接口测试框架实例
2016/11/04 Python
python万年历实现代码 含运行结果
2017/05/20 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
自荐书范文
2013/12/08 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
年会邀请函范文
2015/01/30 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
停课通知书
2015/04/24 职场文书
教师节主题班会方案
2015/08/17 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python