JavaSctiptのPromise、thenが想定通りに動きません

Question

###前提・実現したいこと
JavaScriptの勉強を始めたばかりなのですが、
Promiseのthenで躓いています。

下記ソースコードを実行した際に、
process1実行→500ms後にthenが発動しprocess2が実行
とされるものと思っていたのですが、
実際は
procsee2→process1の順に実行されてしまいます。

thenの使用方法が間違っているのだと思いますが、
なぜprocess1→procsee2の順番に実行されないのかわかりません。

setTimeOutがそれぞれ非同期で実行され,
process2の方が待ち時間が短いため、先に実行終了するのだと思いますが、
thenはそれをprocess1→2の順で実行してくれるのだと思っていました。

下記のソースコードの誤りと、
どうすれば想定した挙動になるかを教えて頂けないでしょうか。

よろしくお願いします。

function process1() {
  return new Promise(function(resolve, reject){
        setTimeout(function(){
              console.log("process1");
              resolve();
        }, 500);
   });
}

function process2() {
  return new Promise(function(resolve, reject){
        setTimeout(function(){
              console.log("process2");
              resolve();
        }, 200);
   });
}

function test() {
    process1().then(process2());
}

>process2
 process1

Answer 1

process1().then(process2);
これで期待通り動くようにおもいます

補足
.then(process2()) としちゃうと、process2()の戻り値が、process1()のコールバック関数実行後に実行(?)されるのだと思います。
他の言語だとthen()に渡す値の型が適正じゃない(関数じゃない)時点でエラーになるものもあるかと思いますが、javascriptはその辺りアバウトに許容しますから、嵌ったら原因究明が難しかったりしますね。

Comments

[AkikoS]

なんと。。ありがとうございます！解決しました。

[AkikoS]

はい、その通りです。一日嵌ってしまいました。。。
投稿してよかったです。本当にありがとうございます。

Answer 2

setTimeoutは「Xms後に処理の実行を予約する」という機能です。

process1().then(process2());

この記述だと「500ms後にconsole出力する」という処理を予約し終わったら「200ms後にconsole出力する」という処理を予約する、という処理をしたことになります。
TVの録画予約と放映時間の関係に似てますかね。
process1の実行後にprocess2を実行しようとするならこんな感じでしょうか。

function process1() {
  return new Promise(function(resolve, reject){
        setTimeout(function(){
              console.log("process1");
              process2();
              resolve();
        }, 500);
   });
}
function process2() {
  return new Promise(function(resolve, reject){
        setTimeout(function(){
              console.log("process2");
              resolve();
        }, 200);
   });
}
function test(){
  process1();
}

Comments

[AkikoS]

setTimeOutの説明ありがとうございます！
予約した時点でresolveされちゃったら困るなぁと思ったのですが、
そもそもthenの後のfunctionの指定方法が間違っていたようでした。。。
少しずつ覚えていきます。ありがとうございました。