执行顺序和第一题相同，不同的是延时器被包裹在了一个立即执行函数内容，并把每一次循环的i作为参数传入，此时循环内部的函数形成了一个私有作用域，每一次的i变量被独立保存了起来，因此每一次循环的i的值都会被打印出来。
延时器内部回调函数是异步函数，将在延时结束后，进入消息队列等待执行，因此同步的console.log("CCCC")最优先执行，然后延时0ms的延时器的回调先进入消息队列，1000ms后第一个延时器的回调再进入消息队列等待执行，因此先执行0ms的回调打印DDDD，再执行1000ms的回调打印BBBB。
这里与上一题不同的是中间多了一个执行3s的同步while循环，因此执行顺序是这样的：
第一个延时器延时1s后内部异步回调函数进入消息队列等待执行，
等待while循环3s后打印"CCCC"，
循环结束后第一个延时器内部的回调已经进入消息队列第一个执行位置等待执行。
第二个延时器延时0s后内部异步回调函数进入消息队列等待执行，延时结束后排到第一个延时器的回调函数后面，
因此异步队里内部先打印"BBBB"，再打印"DDDD"
我们有时候需要遍历数组的元素，将它们传入到异步函数中执行，其中的异步写法容易写错，我们来看一下有哪些易错点。
假设我们有个异步方法 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 的情况。
var xmlHttpfunction createXMLHttpRequest(){
//Mozilla 浏览器（将XMLHttpRequest对象作为本地浏览器对象来创建）
if(window.XMLHttpRequest){ //Mozilla 浏览器
xmlHttp = new XMLHttpRequest()
}else if(window.ActiveXObject) { //IE浏览器
//IE浏览器（将XMLHttpRequest对象作为ActiveX对象来创建）
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")
}catch(e){
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}catch(e){}
}
}
if(xmlHttp == null){
alert("不能创建XMLHttpRequest对象")
return false
}
}
//用于发出异步请求的方法
function sendAsynchronRequest(url,parameter,callback){
createXMLHttpRequest()
if(parameter == null){
//设置一个事件处理器，当XMLHttp状态发生变化，就会出发该事件处理器，由他调用
//callback指定的javascript函数
xmlHttp.onreadystatechange = callback
//设置对拂去其调用的参数（提交的方式，请求的的url，请求的类型（异步请求））
xmlHttp.open("GET",url,true)//true表示发出一个异步的请求。
xmlHttp.send(null)
}else{
xmlHttp.onreadystatechange = callback
xmlHttp.open("POST",url,true)
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xmlHttp.send(parameter)
}
}
//以上代码是通用的方法，接下来是调用以上的方法
function loadPros(title,count,pid,cid,level){
// 调用异步请求方法
url = "。。。。。。。。"
sendAsynchronRequest(url,null,loadCallBack)
}
// 指定回调方法
function loadCallBack(){
try
{
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if(xmlHttp.responseText != null &&xmlHttp.responseText != ""){
var divProid = document.getElementById('videolist')
divProid.innerHTML = xmlHttp.responseText
for(i=0i<leni++)
{
var video_url = document.getElementById("videolist"+i+"").href
if(video_url != undefined &&video_url != null &&video_url != ""){
window.location.href = video_url
}
}
}
}
}
if (xmlHttp.readyState == 1)
{
//alert("正在加载连接对象......")
}
if (xmlHttp.readyState == 2)
{
//alert("连接对象加载完毕。")
}
if (xmlHttp.readyState == 3)
{
//alert("数据获取中......")
}
}
catch (e)
{
//alert(e)
}
}
