JavaScriptで非同期処理を再帰的に逐次処理したい

Question

JavaScriptで非同期処理を再帰的かつ逐次処理しようとしています。
下記のサンプルコードで再帰部分は逐次処理になったのですが、最初のrecursiveFuncに続くthen部分が1つ目の再帰処理が終わった時点で実行されてしまいます。全ての再帰処理が終わったら"done"と表示するにはどうしたら良いでしょうか？

var arr = ["1","2","3","4","5","6","7","8","9","10"];

recursiveFunc(arr).then(function(){console.log("done");});

function recursiveFunc(arr){
    while (arr.length > 0 ) {
        return new Promise((resolve,reject)=>{
            var tmpArr = arr.splice(0,3);
            var entryTimestamp = Date.now();
            setTimeout(function(){logger(tmpArr,entryTimestamp);resolve()},1000);
        }).then(function(){recursiveFunc(arr)});
    }
}

function logger(arr, timestamp){
    console.log(JSON.stringify(arr)+timestamp);
}

Answer 1

        }).then(function(){recursiveFunc(arr)});

の部分を、

        }).then(function(){return recursiveFunc(arr)});

とすればよいのでは、と思います。
Promiseをreturnするのがポイントですね。

Comments

[knp]

回答ありがとうございます。確かにそのように修正したら意図した動作になったのですが、recursiveFuncの中でPromiseをreturnしているのにダメな理由はなんでしょうか？

[othersight]

`recursiveFunc(arr)`の戻り値がPromiseであっても、`function(){recursiveFunc(arr)}`の戻り値は、return文が無いため`undefined`となってしまうからです。

意図した動作にするには、`then()`の引数をPromiseを返す関数にする必要がありますが、元のコードでは`.then()`の引数が結果的にundefinedを返す関数となっていたため、`.then()`が直ちにresolveしてしまった、ということになります。

なお、一点補足ですが、`new Promise((resolve, reject)=>{...})`の`resolve`に渡した引数(一つ)は、`.then()`の引数の関数に渡されるという性質がありますので、上記のコードについては、
```js
setTimeout(function(){logger(tmpArr,entryTimestamp);resolve()},1000);
}).then(function(){recursiveFunc(arr)});
```
の部分を
```js
setTimeout(function(){logger(tmpArr,entryTimestamp);resolve(arr)},1000);
}).then(recursiveFunc);
```
のように修正しても意図した動作になります。

[knp]

次のコードで実験しておっしゃっている意味がわかりました。再帰の内部はnew Promise.then()となっているので一つ前の結果を待つ逐次処理にはなっているけれど、呼び出し元に結果が伝わらない書き方になっていたのですね。

var p = Promise.resolve();
p.then(function(){asyncFunc("1")}).then(function(){asyncFunc("2")});
//asyncFuncを呼び出した直後に新しいPromiseオブジェクトが作られ、thenの実行結果として返るので"順番"に処理されるが、asyncFuncの結果を待たずに次のthenが実行される。asyncFuncが返すPromiseオブジェクトは無名関数の中で消滅する。

p.then(function(){return asyncFunc("1")}).then(function(){return asyncFunc("2")});
//asyncFuncが返すPromiseオブジェクトをthenの実行結果に引き渡すので、asyncFuncの結果を待つ逐次処理になる。

function asyncFunc(text){
return new Promise((resolve)=>{
setTimeout(function(){console.log("log:"+text);resolve()},1000);
})
}

[othersight]

まさしく、そういうことですね。解決できたようで、何よりです。

Answer 2

Promise は azu さんが素晴らしいリファレンスを公開して下さっているので、是非、参考にすることをお勧めします。
http://azu.github.io/promises-book/#promise-sequence

Re: knp さん

Comments

[knp]

ありがとうございます。参考になりました。

Answer 3

再帰関数にしなければいけない理由はありますか？
特に理由がないのであれば、以下のような書き方でも実現できます
もし参考になるのであればどうぞ。

function recursiveFunc(arr){
   var p = Promise.resolve()
   arr.forEach(function(target){
      p = p.then(function(){
         return new Promise(function(resolve){
            setTimeout(function(){
               console.log(target)
               resolve()
            },1000);
         })
      })
   })
   return p
}

var arr = ["1","2","3","4","5","6","7","8","9","10"];
recursiveFunc(arr).then(function(){console.log("done");});

async/awaitを使用可能であれば、以下のように書きます

const recursiveFunc = async (arr) => {
   for(const target of arr){
      await new Promise((resolve) => {
         setTimeout(()=>{
            console.log(target)
            resolve()
         },1000);
      })
   }
}

var arr = ["1","2","3","4","5","6","7","8","9","10"];
recursiveFunc(arr).then(function(){console.log("done");});

Comments

[knp]

色々な書き方ができますね。参考になりました。ありがとうございます。