for循环中加入异步代码输出案例

问题：

for(var i=0; i < 10; i++) {                
    setTimeout(function() {
    console.log(i);
    }, 1000);
} //输出10个10

原因：setTimeout是异步的，只有主线程上的程序执行结束，才会执行异步函数。在该for循环中，循环10次，就会在队列中加入10个setTimeout，等for循环结束了，才会执行那10个setTimeout。for循环结束时，i=10，因此会输出10个10。

如果想要正常输出0~9

//1、利用块级作用域
for(let i=0; i < 10; i++) {                
 setTimeout(function() {
 console.log(i);
 }, 1000);
} 

//2、利用自执行函数，将i作为参数传入
for(var i=0; i < 10; i++) {
 (function(i) {
     setTimeout(function() {
         console.log(i);
 }, 1000);
 })(i);        
}

//3、利用setTimeout的第三个参数，将i作为参数传入function
for(var i=0; i < 10; i++) {
 setTimeout(function(j) {
 console.log(j);
 }, 1000, i);
}

//4、利用promise
for(var i=0; i < 10; i++) {
 new Promise((resolve, reject) => {
 var j = i;
 setTimeout(function() {
     console.log(j)
 }, 1000);
 })
}

//5、利用async函数
async function foo() {
 for(var i=0; i < 10; i++) {
 let result = await new Promise((resolve, reject) => {
     setTimeout(function() {
     resolve(i);
         }, 1000);
 });
 console.log(result);
 }
}
foo();