6.Javascript如何處理循環的異步操做

前沿:參考ES6語法的async/await的處理機制html

先上一段代碼es6

 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纔會繼續後面的操做

另外還有一種遞歸的處理思路async

 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對象)

轉:http://www.javashuo.com/article/p-wfvlxpfq-gz.htmlspa

相關文章
相關標籤/搜索