第一百篇: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函数已执行"
这也就是一个最简单的异步程序了
如果是这是一个同步程序，那么它会：
等三秒
"setTime函数已执行"
再出现
"成功脱单"
所以我们为什么需要异步？
设想刚才的例子代码：
如果我们把setTime函数中的3000改成三亿：
setTimeout(function () {
document.getElementById("demo1").innerHTML="setTime函数已执行";
}, 3000000000000000);
那么，我们可能很难再见到"成功脱单了"
（可能等个几天吧）
而事实上我们可能的程序还有用到很多异步的请求，像ajax
如果ajax需要的时间太久，那么页面就无法加载了
所以我们需要异步！
5.1.什么是异步？
异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。
在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。
而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。
简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。
以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。
————来自菜鸟教程
6.异步如何执行？
JavaScript 是一门单线程语言，异步操作都是放到事件循环队列里面，
等待主执行栈来执行的，并没有专门的异步执行线程
···同步的进入主线程，
···异步的进入任务队列，
主线程中的任务执行完毕后，去任务队列中读取相应的任务，推入主线程执行
That's all
(呼，终于写完了)
第一百篇:JS异步的更多相关文章
- 前端总结·基础篇·JS（四）异步请求及跨域方案
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 深入理解node.js异步编程：基础篇
###[本文是基础内容,大神请绕道,才疏学浅,难免纰漏,请各位轻喷] ##1. 概述 目前开源社区最火热的技术当属Node.js莫属了,作为使用Javascript为主要开发语言的服务器端编程技术和平 ...
- Node.js异步处理CPU密集型任务
Node.js异步处理CPU密集型任务 Node.js擅长数据密集型实时(data-intensive real-time)交互的应用场景.然而数据密集型实时应用程序并非仅仅有I/O密集型任务,当碰到 ...
- 转:web前端面试题合集 (Javascript相关)（js异步加载详解）
1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...
- 前端总结·基础篇·JS（一）五大数据类型之字符串（String）
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(二)补充 前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录 这是& ...
- 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）
目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...
- 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- JS 异步系列 —— Promise 札记
Promise 研究 Promise 的动机大体有以下几点: 对其 api 的不熟悉以及对实现机制的好奇; 很多库(比如 fetch)是基于 Promise 封装的,那么要了解这些库的前置条件得先熟悉 ...
- JS异步编程 (2) - Promise、Generator、async/await
JS异步编程 (2) - Promise.Generator.async/await 上篇文章我们讲了下JS异步编程的相关知识,比如什么是异步,为什么要使用异步编程以及在浏览器中JS如何实现异步的.最 ...
随机推荐
- 【Redis】字典
Redis 字典 基本语法 字典是Redis中的一种数据结构,底层使用哈希表实现,一个哈希表中可以存储多个键值对,它的语法如下,其中KEY为键,field和value为值(也是一个键值对): HSET ...
- JS：undefined number
undefined数据类型:未定义属性 undefined 表示不含值 <script> var t1=""; var t2; if (t1===undefined) ...
- CLOSE_WAIT过多解决方法
背景:windows server 现象:CLOSE_WAIT过多(几百个),导致端口被占用光了,其他服务无法运行 原因:由于KeepLive在Windows操作系统下默认是7200秒,也就是2个小时 ...
- python素描照片
#!/usr/bin/python # -*- coding: utf-8 -*- from PIL import Image import numpy as np a = np.asarray(Im ...
- 配置nginx多域名虚拟主机
1.先做域名映射,由于我们使用的是阿里云域名. 登录阿里云控制台-->域名与网站(万网)-->域名-->选择一个域名-->域名解析-->添加记录 配置静态资源下载转发: ...
- UiPath剪贴板操作的介绍和使用
一.剪切板操作的介绍 模拟用户使用剪切板操作的一种行为: 例如使用设置剪切板(SettoClipboard),从剪切板获取(GetfromClipboard)的操作 二.剪切板相关操作在UiPath中 ...
- Linux shell环境的配置
shell配置文件分类 按生效范围分类:全局和局部 按登录方式分类:交互式和非交互式 按功能分类:profile和bashrc shell配置文件按生效范围分类: 全局配置:针对有所用户有效 /etc ...
- Web思维导图实现的技术点分析（附完整源码）
简介 思维导图是一种常见的表达发散性思维的有效工具,市面上有非常多的工具可以用来画思维导图,有免费的也有收费的,此外也有一些可以用来帮助快速实现的JavaScript类库,如:jsMind.KityM ...
- pytest多进程/多线程执行测试用例
前言: 实际项目中的用例数量会非常多,几百上千:如果采用单进程串行执行的话会非常耗费时间.假设每条用例耗时2s,1000条就需要2000s $\approx$ 33min:还要加上用例加载.测试前/后 ...
- Apache：dbutils 开源JDBC工具类库
commons-dbutils jar:下载 package com.jdbc.tools; import org.apache.commons.dbutils.QueryRunner; import ...