JS 的异步遍历，你真的会写吗？

我们有时候需要遍历数组的元素，将它们传入到异步函数中执行，其中的异步写法容易写错，我们来看一下有哪些易错点。

假设我们有个异步方法 sleepPromise，形式如下：

这里为了方便演示，使用 setTimeout 写成了个 promise 形式的 sleep 方法。传入的 t 为延迟执行的时间，msg 为信息内容。

在实际开发中，异步方法可能是传入用户好友 id 查找数据库，获得简单的好友信息。

假设我们需要在下面代码的注释位置下方写一个异步便利实现。

通常前端一看到要遍历数组，就会用 forEach。如果你不够老道，可能会写出如下的实现：

输出结果为；

这种写法并不对，其实是将遍历写成了同步。

问题出在哪？出在 forEach 本身并不支持异步写法，你在 forEach 方法的前面加不加 await 关键字都是无效的，因为它的内部没有处理异步的逻辑。

forEach 是 ES5 的 API，要比 ES6 的 Promise 要早的多得多。为了向后兼容，forEach 以后也不会支持异步处理。

所以 forEach 的执行并不会阻塞 loopAsync 之后的代码，所以会导致阻塞失败，先输出 [end]。

使用普通的 for 循环写法，await 的外层函数就仍就是 loopAysnc 方法，就能正确保存阻塞代码。

但这里的问题是，这些异步方法的执行是 串行 的。可以看到总共执行了 6 s。

如果我们的这些请求是有顺序的依赖关系的，这样写是没问题。

但如果我们的场景是根据用户 id 数组从数据库中查找对应用户名，我们的时间复杂度就是 O(n) ，是不合理的。

此时我们需要改写为 并行 的异步，并且还要保证所有异步都执行完后才执行下一步。我们可以用 Promise.all()。

首先，我们需要根据 tasks 数组生成对应的 promise 对象数组，然后传入到 Promise.all 方法中执行。

这样，这些异步方法就会同时执行。当所有异步都执行完毕后，代码才往下执行。

输出结果如下：

3 秒就完事了，太强了。

前面说到 forEach 底层并没有实现异步的处理，才导致阻塞失效，那么我们其实不妨实现支持异步的简易 forEach。

并行实现：

串行实现：

用法：

简单总结一下。

一般来说，我们更常用 Promise.all 的并行执行异步的方法，常见于数据库查找一些 id 对应的数据的场景。

for 循环的串行写法适用于多个异步有依赖的情况，比如找最终推荐人。

forEach 则是纯粹的错误写法，除非是不需要使用 async/await 的情况。

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。

方法一：也叫Script DOM Element

(function(){

var scriptEle = document.createElement("script")

scriptEle.type = "text/javasctipt"

scriptEle.async = true

scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"

var x = document.getElementsByTagName("head")[0]

x.insertBefore(scriptEle, x.firstChild)

})()

<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码

(function(){

var ga = document.createElement('script')

ga.type = 'text/javascript'

ga.async = true

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'

var s = document.getElementsByTagName('script')[0]

s.parentNode.insertBefore(ga, s)

})()

但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。

方法二：onload时的异步加载

(function(){

if(window.attachEvent){

window.attachEvent("load", asyncLoad)

}else{

window.addEventListener("load", asyncLoad)

}

var asyncLoad = function(){

var ga = document.createElement('script')

ga.type = 'text/javascript'

ga.async = true

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'

var s = document.getElementsByTagName('script')[0]

s.parentNode.insertBefore(ga, s)

}

)()

这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。

注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。

方法三：其他方法

由于JavaScript的动态性，还有很多异步加载方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。

XHR Injection(XHR 注入)：通过XMLHttpRequest来获取javascript，然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。

//获取XMLHttpRequest对象，考虑兼容性。

var getXmlHttp = function(){

var obj

if (window.XMLHttpRequest)

obj = new XMLHttpRequest()

else

obj = new ActiveXObject("Microsoft.XMLHTTP")

return obj

}

//采用Http请求get方式open()方法的第三个参数表示采用异步(true)还是同步(false)处理

var xmlHttp = getXmlHttp()

xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true)

xmlHttp.send()

xmlHttp.onreadystatechange = function(){

if (xmlHttp.readyState == 4 &&xmlHttp.status == 200){

var script = document.createElement("script")

script.text = xmlHttp.responseText

document.getElementsByTagName("head")[0].appendChild(script)

}

}

XHR Eval：与XHR Injection对responseText的执行方式不同，直接把responseText放在eval()函数里面执行。

//获取XMLHttpRequest对象，考虑兼容性。

var getXmlHttp = function(){

var obj

if (window.XMLHttpRequest)

obj = new XMLHttpRequest()

else

obj = new ActiveXObject("Microsoft.XMLHTTP")

return obj

}

//采用Http请求get方式open()方法的第三个参数表示采用异步(true)还是同步(false)处理

var xmlHttp = getXmlHttp()

xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true)

xmlHttp.send()

xmlHttp.onreadystatechange = function(){

if (xmlHttp.readyState == 4 &&xmlHttp.status == 200){

eval(xmlHttp.responseText)

//alert($)//可以d出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来

$("#btn1").click(function(){

alert($(this).text())

})

}

}

Script In Irame：在父窗口插入一个iframe元素，然后再iframe中执行加载JS的 *** 作。

var insertJS = function(){alert(2)}

var iframe = document.createElement("iframe")

document.body.appendChild(iframe)

var doc = iframe.contentWindow.document//获取iframe中的window要用contentWindow属性。

doc.open()

doc.write("<script>var insertJS = function(){}<\/script><body onload='insertJS()'></body>")

doc.close()

GMail Mobile：业内JS内容被注释，所以不会执行，在需要的时候，获取script中的text内容去掉注释，调用eval()执行。

<script type="text/javascript">

/*

var ...

*/

</script>

HTML5新属性：async和defer属性

defer属性：IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注：所有的defer脚本必须保证按顺序执行的。

<script type="text/javascript" defer></script>

async属性：HTML5新属性。脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。

<script type="text/javascript" defer></script>

Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer，这样IE 4之后的所有IE都支持异步加载。

没有async属性，script将立即获取（下载）并执行，期间阻塞了浏览器的后续处理。如果有async属性，那么script将被异步下载并执行，同时浏览器继续后续的处理。

总结： 对于支持HTML5的浏览器，实现JS的异步加载只需要在script元素中加上async属性，为了兼容老版本的IE还需加上defer属性；对于不支持HTML5的浏览器(IE可以用defer实现)，可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码，你可以把它放在匿名函数中执行，也可以在onload中执行，也可以通过XHR注入实现，也可以创建一个iframe元素，然后在iframe中执行插入JS代码。

按照js同步执行的顺序，函数调用会首先执行for循环，循环5次开启了5个延迟器，延时器内部的回调函数将会异步执行，会在延时1s后进入消息队列等待执行。循环了5次，所以此时i的值为5，然后同步执行console.log打印5，第一次同步执行结束，然后开始执行消息队列的异步任务，打印5个5，中间的undefined是函数调用无返回值返回的。

执行顺序和第一题相同，不同的是延时器被包裹在了一个立即执行函数内容，并把每一次循环的i作为参数传入，此时循环内部的函数形成了一个私有作用域，每一次的i变量被独立保存了起来，因此每一次循环的i的值都会被打印出来。

延时器内部回调函数是异步函数，将在延时结束后，进入消息队列等待执行，因此同步的console.log("CCCC")最优先执行，然后延时0ms的延时器的回调先进入消息队列，1000ms后第一个延时器的回调再进入消息队列等待执行，因此先执行0ms的回调打印DDDD，再执行1000ms的回调打印BBBB。

这里与上一题不同的是中间多了一个执行3s的同步while循环，因此执行顺序是这样的：

第一个延时器延时1s后内部异步回调函数进入消息队列等待执行，

等待while循环3s后打印"CCCC"，

循环结束后第一个延时器内部的回调已经进入消息队列第一个执行位置等待执行。

第二个延时器延时0s后内部异步回调函数进入消息队列等待执行，延时结束后排到第一个延时器的回调函数后面，

因此异步队里内部先打印"BBBB"，再打印"DDDD"

---