第一百篇:JS异步
好家伙,打工人要打工,博客会更新的没有以前频繁了
芜湖,一百篇了,这篇写一个比较难的异步(其实并不难理解,主要是为promise铺垫)
老样子,先补点基础:
1.进程
来吧,新华字典
大概这么个意思
百度百科:
进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础。
在早期面向进程设计的计算机结构中,进程是程序的基本执行实体;在当代面向线程设计的计算机结构中,进程是线程的容器。
程序是指令、数据及其组织形式的描述,进程是程序的实体。
所以说,进程是程序的进行的过程,它是实例,是分配单元,是单位
值得注意的是,如果一个程序启动两次,那么就是两个进程
来看看任务管理器中的进程
2.线程
来吧,百度百科
3.事件循环
同步和异步任务分别进入不同的执行环境,同步的进入主线程,即主执行栈,异步的进入任务队列。
主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行。
上述过程的不断重复就是我们说的 Event Loop (事件循环)。
4.任务
在ES6中,有一个新的概念建立在事件循环队列之上,叫作任务队列(job queue),这个概念给大家带来的最大影响可能是Promise的异步特性(参见第3章)。
遗憾的是、目前为止,这是一个没有公开API的机制,因此要展示清楚有些困难。
所以我们目前只从概念上进行描述,等到第3章讨论Promise的异步特性时,你就会理解这些面作是如何协调和处理的。
因此,我认为对于任务队列最好的理解方式就是,它是挂在事件循环队列的每个tick之后的一个队列。(事件循环中,每一次循环称为一个tick)
在事件循环的每个tick中,
可能出现的异步动作不会导致一个完整的新事作添加到事件循环队列中,而会在当前tick的任务队列末尾添加一个项目(一个任务)。
这就像是在说:“哦,这里还有一件事将来要做,但要确保在其他任何事情发生之前就完成它。”
事件循环队列类似于一个游乐园游戏:玩过了一个游戏之后,你需要重新到队尾排队才能再玩一次。而任务队列类似于玩过了游戏之后,插队接着继续玩。
一个任务可能引起更多任务被添加到同一个队列末尾。
所以,理论上说,任务循环(jobloop)可能无限循环(一个任务总是添加另一个任务,以此类推),进而导致程序没有是够资源,
无法转移到下一个事件循环tick。从概念上看,这和代码中的无限循环(就像while(true)..)的体验几乎是一样的。
任务和setTimeout(..0) hack的思路类似,但是其实现方式的定义更加良好,对顺序的保证性更强: 尽可能早的将来。
设想一个调度任务(直接地,不要hack)的API,称其为schedule(..)。考虑:
console.log( "A" );
setTimeout( function(){
console.log( "B" );
},0);
//理论上的“任务API”
schedule( function(){
console.log( "C" );
schedule( function(){
console. log( "D");
});
});
可能你认为这里会打印出ABCD,但实际打印的结果是ACDB.因为任务处理是在当前事件循环tick结尾处,
且定时器触发是为了调度下一个事件循环tick_(如果可用的话!)
5.异步
<html>
<head>
<meta charset="utf-8">
<title>异步</title>
</head>
<body>
<p>回调函数等待 3 秒后执行。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
setTimeout(function () {
document.getElementById("demo1").innerHTML="setTime函数已执行";
}, 3000);
document.getElementById("demo2").innerHTML="成功脱单";
</script>
</body>
</html>
我们再页面中首先看到的是
"成功脱单"
三秒过后我们会看到
"setTime函数已执行"
这也就是一个最简单的异步程序了
![](https://img2022.cnblogs.com/blog/2501855/202207/2501855-20220728142950883-1609025046.gif)
如果是这是一个同步程序,那么它会:
等三秒
"setTime函数已执行"
再出现
"成功脱单"
所以我们为什么需要异步?
设想刚才的例子代码:
如果我们把setTime函数中的3000改成三亿:
setTimeout(function () {
document.getElementById("demo1").innerHTML="setTime函数已执行";
}, 3000000000000000);
那么,我们可能很难再见到"成功脱单了"
(可能等个几天吧)
而事实上我们可能的程序还有用到很多异步的请求,像ajax
如果ajax需要的时间太久,那么页面就无法加载了
所以我们需要异步!
5.1.什么是异步?
异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。
在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。
而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。
简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。
以上是关于异步的概念的解释,接下来我们通俗地解释一下异步:异步就是从主线程发射一个子线程来完成任务。
————来自菜鸟教程
6.异步如何执行?
JavaScript 是一门单线程语言,异步操作都是放到事件循环队列里面,
等待主执行栈来执行的,并没有专门的异步执行线程
···同步的进入主线程,
···异步的进入任务队列,
主线程中的任务执行完毕后,去任务队列中读取相应的任务,推入主线程执行
That's all
(呼,终于写完了)