前言

JS的异步由来已久,各种异步概念也早早堆在开发者面前。可现实代码中,仍然充斥了各种因异步顺序处理不当的bug,或因不好好思考,或因不了解真相。今天,就特来再次好好探索一番JS的异步世界。

01 异步的由来--单线程

上世纪末,互联网仍处于极慢速时代,穿梭于客户端与服务端的请求,对于时间的耗费是如此的奢侈。而即将面世的LiveScript,便被网景公司考虑同时在浏览器和服务端使用,在浏览器端对表单进行校验,从而提高表单提交效率。为了将这一脚本语言推向市场,网景与sun联合开发,最终以Java冠名为JavaScript。

刚面世的JavaScript,是为网页设计人员准备的,不需要太复杂的语言设计,能简单上手,自然就是最好的。

于是,单线程,弱类型,一开始就成为了JavaScript的基因。而其中的单线程,便是最戏剧性的存在,Ryan Dahl因为JavaScript是单线程语言,从而选择了js开发了轻量级服务器(nodejs),使得js从浏览器端延伸到服务器。随着JS开发队伍和程序复杂度的同步发展,异步处理成为了JS程序的重中之重。

02 JS是一个充满异步的世界

先来导入几个异步的常见场景

dom用户输入响应

ducument.addEventListener('click', function(){})

Ajax

$.ajax(<url>, function() {})

定时/延时

setTimeout(function() {}, 1000)
setInterval(function() {}, 1000)

文件读取

var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {}

以上的场景基本有个共同特性,耗时!

举个栗子,我们去银行取钱,当人很多时,如果还是排队模式,会耗费很多时间(同步模式)。于是设立了取号机,取了号,不用排队,在一旁坐着,安心打开电脑写个文档,等叫号后再去办业务(异步模式)。

同理,由于单线程的特性,当JS应用越来越复杂,耗时的程序如果以同步来进行,就会阻塞js的单线程,如大水冲过狭窄的河道,势必决堤。那JS是怎么开拓导流渠道的呢?其实在js的单线程(主线程)背后,规律的运行了很多线程:

  1. dom事件处理线程
  2. http请求线程
  3. 定时器线程
  4. ...

这些线程就充当了JS大江的小河道,当短时有大流量时,接纳吸收,将过滤处理后的正常水流,再汇入JS主干道。

与其说JS是单线程,不如说JS是有着自动化多线程处理的主线程。无需手动编码介入新开线程,切换线程,消息同步等冗繁的处理。专用线程会接管相关任务,并将处理结果送回主线程进行顺序处理。

说到这里稍微提一下web worker,虽然是自定义的多线程,最终还是子线程地位,仍旧将处理完成的结果以回调函数方式汇入到主线程进行异步处理。

03 异步处理一般流程

先看以下代码,异步模式开始了

var img = new Image()
var imgLoadCallback = function() {}
img.src = 'http://????'
img.onload = callback

“http君,麻烦帮取一个图片数据,好了后交给imgLoadCallback君。” — js主线程老大
“任务收到,您先忙,图片请求交给我了,好了之后我叫imgLoadCallback君到休息室排队,您空了通知下 Event Loop巡检官。” — http请求线程

img.src = 'http://????'
img.onload = imgLoadCallback

“图片已取到,imgLoadCallback君去休息室排队等候吧!” — http请求线程

imgLoadCallback入栈JS任务队列

“刚好忙完手上的事情了,Event Loop君,帮看下休息室有没有人排队” — JS主线程老大
“老大,已把等候者imgLoadCallback叫过来处理任务” — Event Loop巡检官

执行imgLoadCallback

“事情都交给合适的人去办了,突然就清闲下来了,老大就是要这样当啊,嘿嘿嘿… Event Loop君,定时看下休息室有没有人排队吧… ” — JS主线程老大

JS主线程通过Event Loop读取任务队列

讲完故事,再来看这张异步示意图,是否能理解了?

 
 
 

04 回调处理工具的进化

从前面的篇章已经能看出来了,异步处理的结果是通过回调放置到任务队列转接到主线程中的。

北京猿人刀跟火种,这么写异步回调,看上去也能令人接受。

$.ajax(
url: '自家香蕉树林',
data: {
picker: '猴子A'
},
success: function(data) {
$.ajax(
url: '隔壁老孙家桃林',
data: {
exchanges: data.香蕉,
buyer: '猴子A'
},
success: function(data) {
console.log('向本猴王进贡', data.桃子)
}
)
}
)

进化成人类后交易过程变的复杂了,于是就变成回调地狱,传说中的callback hell

$.ajax(
url: '自家香蕉树林',
data: {
picker: '老王'
},
success: function(data) {
$.ajax(
url: '集市贩卖',
data: {
goods: data.香蕉,
seller: '老王'
},
success: function(data) {
$.ajax(
url: '隔壁老李桃子铺',
data: {
exchanges: data.钱,
buyer: '老王'
},
success: function(data) {
console.log('向本王进贡', data.桃子)
}
)
}
)
}
)

于是发明了铁器promise,解决回调地狱之痛

$.ajax(
url: '自家香蕉树林',
data: {
picker: '老王'
}
)
.then(function(data) {
return $.ajax(
url: '集市贩卖',
data: {
goods: data.香蕉,
seller: '老王'
}
)
})
.then(function(data) {
return $.ajax(
url: '隔壁老李桃子铺',
data: {
exchanges: data.钱,
buyer: '老王'
}
)
})
.then(function(data) {
console.log('向本王进贡', data.桃子)
})

关于promise的升级版async、await,本篇不多说了,理念上基本一致。

继续...

这下一次命令,只会来供给本王一次桃子,每次都要发令,好麻烦,得下个令让老王每天去卖香蕉买桃子,给我月供100个,于是就发生了以下的故事

var contributeTime;
setInterval(function(){
$.ajax(
url: '自家香蕉树林',
data: {
picker: '老王'
}
)
.then(function(data) {
return $.ajax(
url: '集市贩卖',
data: {
goods: data.香蕉,
seller: '老王'
}
)
})
.then(function(data) {
return $.ajax(
url: '隔壁老李桃子铺',
data: {
exchanges: data.钱,
buyer: '老王'
}
)
})
.then(function(data) {
var currentTime = new Date().getTime();
if (!contributeTime || (currentTime - contributeTime > '月')) {
console.log('向本王进贡', [data.桃子,…]); //length=100
currentTime = contributeTime;
}
})
}, '天')

这过程,好像也太不优雅了点。

ReactX的JS版,RxJs来了,将异步看作为单点,将其扩展了时间线,作为流来处理。所以对于一次又一次的进贡,都可进行时序管理,于是整个过程变成这样:

import { ajax } from 'rxjs/ajax'; //此处特别写引入,目的为不与jquery.ajax混淆
import { interval } from 'rxjs';
const ob = interval('天');
const peachPay = ob
.pipe(switchMap(x => ajax.post('自家香蕉树林', {picker: '老王'})))
.pipe(switchMap(data => ajax.post('集市贩卖', {seller: '老王', goods: data.香蕉})))
.pipe(switchMap(data => ajax.post('隔壁老李桃子铺', {buyer: '老王', exchanges: data.钱})))
.pipe(throttle(data => interval('月')))
.subscribe(data => console.log(`每月收到月供:${data.桃子.length}个${data.桃子}`));

整个过程顺着管道不断变换处理,就是一条全自动流水线!然鹅,然鹅,并一定每月就能供出100个桃子啊,万一遇到农灾,或者经济萧条…

以上例子仅提供思路,且读且珍重!

05 比工具更重要的,是理解

前端开发中,诸多剪不断理还乱的偶现bug来源于异步处理的顺序混乱。即便是异步处理工具越来越先进,由于代码层面的顺序和真实执行顺序的不一致,也还是容易一不小心犯错误。

异步处理工具不是万能的,还是需不断将异步原理内化入思维模式中,种码的时候,就需清晰的知道该段代码会什么时候结出果实。

再注:以上代码未经运行验证,仅示意流程与思路。望各路大神多多包涵!如有思路上都提供错误的,求板砖~

本文为原创,如需转载,请注明作者及来源,多谢~

JS的异步世界的更多相关文章

  1. 【译】深入理解python3.4中Asyncio库与Node.js的异步IO机制

    转载自http://xidui.github.io/2015/10/29/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3python3-4-Asyncio%E5%BA%93% ...

  2. js的异步加载你真的懂吗

    面试高频之js的异步加载 讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经历了什么 ?  1  ,  创建document对象, 开始解析页面,    ...

  3. js的异步和单线程

    最近,同事之间做技术分享的时候提到了一个问题"js的异步是另开一个线程吗?"当时为此争论不休.会后自己查阅了一些资料,对这个问题进行一个自我的分析与总结,有不同意见的希望可以赐教, ...

  4. 探秘JS的异步单线程

    对于通常的developer(特别是那些具备并行计算/多线程背景知识的developer)来讲,js的异步处理着实称得上诡异.而这个诡异从结果上讲,是由js的“单线程”这个特性所导致的. 我曾尝试用“ ...

  5. JS实现异步提交

    什么是XMLHttpRequest? XMLHttpRequest对象用于在后台与服务器交换数据 XMLHttpRequst的作用 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在 ...

  6. JS的异步模式

    JS的异步模式:1.回调函数:2.事件监听:3.观察者模式:4.promise对象 JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous) ...

  7. Node.js之异步编程

    > 文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. ![file](https://img2018.cnblogs.com/blog/830272/20 ...

  8. js 同步 异步 宏任务 微任务 文章分享

    分享一篇 写的很好的 宏任务 微任务  同步异步的文章 文章原地址: https://juejin.im/post/59e85eebf265da430d571f89 这一次,彻底弄懂 JavaScri ...

  9. [JS奇怪的世界]No.55 危險小叮嚀:陣列與for in

    前言 前面已經瞭解了使用內建函數建構子的某些危險地方,但其實陣列與for in,也是有一些危險的地方. 陣列與for in 在前面幾個章節有講過陣列就是物件,所以我們一樣可以使用 for in來做處理 ...

随机推荐

  1. Confluence 6 配置校验和识别

    校验你的设置 查看你 Confluence 当前使用的设置,请参考 Viewing System Properties 页面中的内容. 识别系统属性 请参考 Recognized System Pro ...

  2. Confluence 6 中修改默认的表现和内容

    Confluence 构建了一些有用的默认设置,这些设置能够让第一次访问使用 Confluence 系统的用户更好的了解系统.同时默认的内容将新空间和其他区域放置在 Confluence 中. Con ...

  3. Confluence 6 升级自定义的站点和空间获得你的自定义布局

    我们建议你在对站点进行布局修改的时候,你需要为你修改的 Confluence 站点或空间布局保留所有的修改记录. 如果没有的话,你应该可以通过下面的办法找到你的自定义修改.这个方法将会把你对全部网站和 ...

  4. SpringCloud注册中心(Eureka)

    注册中心的作用就是用来方便接口暴露出来的一个管理工具,如果所有的接口只是暴露出来,没有一个同一的管理工具,又有谁知道你暴露了哪些接口了,Eureka是一个springcloud的服务注册和发现模块 搭 ...

  5. 常用ajax样例

    ---恢复内容开始--- // url(String):请求地址 // param(String):请求参数 // targetId(String):结果显示id function ajaxReq(u ...

  6. java常用的中间件

    tomcatWeblogicJBOSSColdfusionWebsphereGlassFish 一般本地开发的话建议使用tomcat. linux系统建议使用jetty或apache hpptd 大型 ...

  7. Distance

    1191: Distance 时间限制: 1 Sec  内存限制: 32 MB 题目描述 There is a battle field. It is a square with the side l ...

  8. 集腋成裘-06-angularJS -angular_02

    1.0 选项卡 其中涉及到了三目运算符号; <!DOCTYPE html> <html ng-app="test"> <head> <me ...

  9. Python enumerate() 函数

    描述 enumerate() 函数用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中. Python 2.3. 以上版本可用,2. ...

  10. tensorflow:验证码的识别(中)

    三.训练识别模型 首先先拷贝一个nets文件夹,主要使用的是文件夹下的两个文件nets_factory.py.alexnet.py,用于导入训练使用的网络alexnet. nets_factory.p ...