javascriptで同期処理をしたい。

Question

前提・実現したいこと

javascriptで同期処理をしたい。
今記述している内容でうまくいくと思ったのですが、違うようで意図する結果になりません。
今作っているページで、javascript部分が肥大化して来ていて、見た目の順番通りに進行しなくなってきました。
「.then」と「new Promise」で解決しようとしているのですけれど、うまくいきません。
アドバイスをください。よろしくお願いします。

発生している問題

現状は、先にいくつか「ここまでは来てる 021」が表示されたあと、「ここまでは来てる 070」が表示されて、
以降の再帰で「ここまでは来てる 021」が表示されている。
だが、再帰が全て終了したあとで、「ここまでは来てる 070」に行きたい。

該当のソースコード

            function displayList(){
                return new Promise(function(resolve,reject){
                    alert('ここまでは来てる 070');
//省略
                    resolve();
                });
            }

            function recursionProc(){
                    alert('ここまでは来てる 021');
//省略...一定の条件下で再帰させている
                            setTimeout(recursionProc, 100);
                            return;
//省略
            }

            function progressProc(){
                return new Promise(function(resolve,reject){
//省略
                    recursionProc();
//省略
                    resolve();
                });
            }

//省略
    progressProc()
        .then(displayList);
//省略

試したこと

ググって、色々試行錯誤をして、この記述に行き着きました。
「function recursionProc(){}」も「new Promise」にしてみましたが、うまくいきませんでした。

補足情報（FW/ツールのバージョンなど）

サーバー：ロリポップ
ブラウザ：FireFox 91.0.2 (64 ビット)
クライアント：macOS Mojave 10.14.6

Comments

[hentaiman]

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function
そこまで試行錯誤出来るなら上記のリンク読めば解決でしょう

Answer 1

解決したみたいです。
「setTimeout」の解釈が間違っていたようです。
「.then」と「new Promise」を使っても「await」を付けても、終了するまで待たずに先に進んでしまうみたいで、
そのあとでタスクキューに入れられている処理(setTimeoutで指定した関数)を処理するようです。

そこで、
「setInterval」に変えて、「recursionProc」の内容を「progressProc」の中に組み替えました。
他にもいくつかバグが有って修正しましたけれど、以下のようにしたら意図通りの順番になりました。

            function progressProc(){
                return new Promise(async function(resolve,reject){
//省略
                    const intervalID = await setInterval(() =>{
//省略・・・キャンセルした場合{
                            clearInterval(intervalID);
                            reject();
                        }
//省略・・・繰り返したい処理をここに記述
//省略・・・正常に終了する場合{
                            clearInterval(intervalID);
                            resolve();
                        }
                    }, 100);
                });
            }

//省略
progressProc()
    .then(displayList);
//省略

アドバイスを頂いた方々、有難うございました。
アドバイスをそのまま実行しても上手くできず(おそらく私のスキル不足)、アドバイスとは違う形になってしまったので、自己解決とさせていただきます。

Answer 2

掲載されたコードだと、
recursionProc();の直後にresolve()してしまっているので、
その後then()の処理が行われてしまいます。

displayListでPromiseを使っても、待つコードがないのですぐに実行されてしまうので、
あまり意味がないです。

再帰がどのような条件で終わるかコードでは分かりませんが、

function displayList(){
    alert('ここまでは来てる 070');
}

function recursionProc(){
    alert('ここまでは来てる 021');
    setTimeout(recursionProc, 100);
    return;
}

function progressProc(){
    return new Promise(function(resolve,reject){
        recursionProc();
        if (再帰が終わったら) {
            resolve();
        }
    });
}


progressProc()
.then(displayList);

のようになるのかなと思います。

Comments

[One_of_Arthur]

有難うございます。上手く行きません。
頂いたコードだと、「if」も再帰させるかループさせる必要があるのでしょうか。

少し変えてみました。未だ解決せずですが、再帰している「recursionProc」は省略無しにするとこうなります。
「progressProc」の中から「recursionProc」を呼ぶ必要がなかったので、外に出して「.then」にし、
「recursionProc」を呼ぶのを外に出しました。

```javascript
function recursionProc(){
return new Promise(function(resolve,reject){
alert('ここまでは来てる 021');
var e_time = new Date();
var diff = Math.floor((e_time.getTime() - s_time.getTime()) / 1000);
if (diff > timeoutSecond || flgCancel){
if(diff > timeoutSecond){
timeoutAlert();
}
endingProc();
reject();
}

countUp = fRead();
document.getElementById('example3').innerHTML = countUp;

if (document.getElementById('progress1').value < document.getElementById('tweetNumber').value ) {
document.getElementById('progress1').value = countUp;
alert('ここまでは来てる 023');
setTimeout(recursionProc, 100);
}else{
startButton.disabled = false; //処理が完了したらボタンを活性状態に戻す
cancelButton.disabled = true; //キャンセルボタンを無効にする
}
resolve();
});
}

progressProc()
.then(recursionProc)
.then(displayList);
```

[One_of_Arthur]

見づらくなってしまいました。すみません。