6.Javascript如何处理循环的异步操作

前沿:参考ES6语法的async/await的处理机制

先上一段代码

 1 function getMoney(){
 2     var money=[100,200,300]  
 3     for( let i=0; i<money.length; i++){
 4         compute.exec().then(()=>{
 5             console.log(money[i])
 6             //alert(i)
 7         })
 8     }
 9 }
10 //compute.exec()这是个异步方法,在里面处理一些实际业务
11 //这时候打印出来的很可能就是300,300,300(因为异步for循环还没有等异步操作返回Promise对象过来i值已经改变)

正确处理思路

 1 async function getMoney(){
 2     var money=[100,200,300]  
 3     for( let i=0; i<money.length; i++){
 4         await compute.exec().then(()=>{
 5             console.log(money[i])
 6             //alert(i)
 7         })
 8     }
 9 }
10 //关键字async/await  async告诉getMoney方法里面存在异步的操作,await放在具体异步操作(方法)前面,意思是等待该异步返回Promise才会继续后面的操作

另外还有一种递归的处理思路

 1 function getMoney(i) {
 2   var money=[100,200,300]
 3   compute.exec().then(() => {
 4     if ( i < money.length ) {  
 5       console.log(money[i]);
 6       i++;
 7         getMoney(i);
 8       }
 9    });
10 }
11 getMoney(0);//开始调用
12 //用递归来实现自我循环(具体循环在then里面,可以确保前面的compute.exec()的异步操作完成).then()是返回了Promise对象为resolve后才进行的(可以了解一下Promise对象)

转:https://www.cnblogs.com/xiujun/p/10637037.html

猜你喜欢

转载自www.cnblogs.com/xiaole9924/p/11841629.html