ES6 关于事件循环的图文理解&&铺垫promise

最新推荐文章于 2021-11-10 21:00:05 发布

weixin_45846980

最新推荐文章于 2021-11-10 21:00:05 发布

阅读量224

点赞数

文章标签： es6

本文链接：https://blog.csdn.net/weixin_45846980/article/details/105133924

版权

事件循环

事件循环js运行环境成为宿主环境

首先解决的问题ECMAscript 和 javaScript是什么关系
在这里插入图片描述
在服务端没有 javaScript的说法而是 ECMAscript

执行栈（）

执行栈基础图
在这里插入图片描述
call stack 一个数据结构，存放各种函数执行环境每一个函数执行之前，它的相关信息会加入执行栈函数调用完成，会销毁执行栈

js引擎会永远执行栈顶。执行栈的最顶部

异步函数

某些函数不会立即执行，需要等到一定的时候才能执行，这种函数被称为异步函数，例如事件，定时器，注意异步函数的执行会被宿主环境所控制
在这里插入图片描述
如果线程发现这件事有处理程序，它会将该程序加入到一个事件队列中，当js引擎发现，执行栈没有任何内容，会将事件队列的第一函数加入到执行栈中执行
js引擎对事件队列取出执行的方式，以及宿主环境的配合，称为事件循环

事件队列

宏队列（计时器，事件回调，http回调）
微队列（当执行栈中没有内容的时候执行微队列，优先级高）//promise MutationObserver
当执行栈清空时js引擎会将微队列的所有任务依次执行，如果没有微任务，将执行宏任务

事件监听

<body>
	<ul id="container"></ul>

	<button id="btn">点击</button>
	<script>
		// MutationObserver  监听dom对象的变化

		const ul = document.getElementById("container");
		let count = 1;
		document.getElementById("btn").onclick = function AAA(){
			// console.log('添加了一个li')
			setTimeout(function(){
				console.log('添加了一个li')
			})

			const li = document.createElement("li");
			li.innerText = count ++;
			ul.appendChild(li)
		}

		const observer = new MutationObserver(function BBB(){
			console.log('ul里面内容发生了改变')
		})

		observer.observe(ul,{
			attributes : true,
			childList : true,
			subtree : true
		})

		// 取消监听
		// observer.disconnect()
	</script>
</body>

异步处理模型

ES官方参考了大量异步场景，总结了一套异步通用的模型，这套模型可以覆盖几乎所有的异步场景

ES6中的增强功能 ES为了兼容以前的版本，以前旧的写法没有抛弃针对这些场景推出了新的API,这套API对异步的处理。变得更为简洁

ES6将某一件事情可以发生异步操作的时候分为两个阶段
unsettled 未决
settled 已决
事情总是从未决阶段逐步发展成已决，并且未决阶段拥有控制已决阶段的能力

es6程序分为三种状态
pending:挂起（等待）处于未决阶段，表示事情还是在挂起，最后结果依然没有出来
resolved：已处理处于已决阶段，表示整个事情已经出现结果，并以正常的逻辑进行下去
rejected:已拒绝：处于已决阶段，表示整个事情已经出现结果，并且无法按正常的逻辑进行下去结果
在这里插入图片描述

weixin_45846980

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6 关于事件循环的图文理解&&铺垫promise

事件循环事件循环js运行环境成为宿主环境首先解决的问题ECMAscript 和 javaScript是什么关系在服务端没有 javaScript的说法而是 ECMAscript执行栈（）执行栈基础图call stack 一个数据结构，存放各种函数执行环境每一个函数执行之前，它的相关信息会加入执行栈函数调用完成，会销毁执行栈js引擎会永远执行栈顶。执行栈的最顶部异步函数某些函数...
复制链接

扫一扫