Javascript Promise .then の実行タイミングについて

Question

実現したいこと

「コールバック地獄」 と 「コールバック地獄をPromiseで置き換えた処理」2つのコードを同時に実行した際の実行タイミングについての質問です。

実現したいコード自体は調べたサイトに載ってあります。

今回は、「自分が試したコードの結果」が「調べサイトに掲載してあるコードの結果」と同じにならない仕組み的なことについてお聞きしたいです。

発生している問題・分からないこと

まず、「コールバック地獄のコード」 と 「Promiseのコード（調べたサイト）」 を同時に実行します。
すると、コンソールには

「 1秒 1 2秒 2 3秒 3 」

と、想定している結果が表示されます。（コールバック地獄 ⇒ .then の順に実行）

次に、「コールバック地獄のコード」と「Promiseのコード（私が試したコード）」を同時に実行すると、

「 1秒 1 2 2秒 3 3秒」

と、表示されます。（2秒から .then が先に実行）

.then は Promise が fulfilledの状態（処理が完了）したタイミングで実行されるという認識です。

上記の認識で自分のコードを見た際、1つ目の .then が開始された時点で fulfilled になり2つ目の .then が実行開始。
そのあと、2つ目のsetTimeout が実行開始されているように見えます。

なぜ、自分のコードでは 2つ目以降の .then が setTimeout よりも先に処理されているのでしょうか。

該当のソースコード

//コールバック地獄のコード

setTimeout(function () {
  console.log('1秒');

  setTimeout(function () {
    console.log('2秒');

    setTimeout(function () {
      console.log('3秒');
    }, 1000);

  }, 1000);
}, 1000);

// 調べたサイトのコード
let delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(resolve , ms);
  });
}

delay(1000)
  .then(() => {
    console.log(1);
    return delay(1000);
  })
  .then(() => {
    console.log(2);
    return delay(1000);
  })
  .then(() => {
    console.log(3);
  });

// 私が試したコード

let promise = new Promise((resolve) => {
  resolve();
})
.then(() => {
  setTimeout(() => {
    console.log(1);
  } , 1000);
})
.then(() => {
  setTimeout(() => {
    console.log(2);
  } , 2000);
})
.then(() => {
  setTimeout(() => {
    console.log(3);
  } , 3000);
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

説明しづらかったので、上記にコードはまとめております。

補足

特になし

Answer 1

> なぜ、自分のコードでは 2つ目以降の .then が setTimeout よりも先に処理されているのでしょうか。

まず、 then メソッド の仕様を把握しましょう。

Promiseによる解決 - とほほのPromise入門 - とほほのWWW入門

つまり、戻り値が Promise である必要があります。

先ほどのコードを見てみましょう。

.then(() => {
  setTimeout(() => {
    console.log(1);
  } , 1000);
})

何も返していませんね。 つまり undefined を返しています。

つまりこれと同じです。

.then(() => {
  setTimeout(() => {
    console.log(1);
  } , 1000);
  return Promise.resolve(undefined);
})

その為、setTimeout の完了を待つことはないです。

setTimeout の時間を待ちたい場合は次の様に Promise のコールバックの第一引数 resolve を呼んでやることで完了を伝えることができます。

.then(() => {
  return new Promise(
    resolve => 
      setTimeout(() => {
        console.log(1);
        resolve();
      } , 1000)
 );
})

以上。

Comments

[krnkn6]

大変申し訳無いのですが、ご教示いただいたにもかかわらずよく分かりませんでした。
そのため、改めてドキュメントを読み直し .then のおおまかな仕様を自分なりに理解してきました。

まず、.then() の仕様について大まかにまとめると下記になるかと思います。

●Promiseオブジェクトのメソッド
●Promiseが待機 から 履行などに 決定されると .then()内の処理が実行
　（後続の同期タスクが完了後実行）
●引数に履行ハンドラー、拒否ハンドラー指定可能
●値の引き渡し可能
（まだまだ私の理解不足なところもあり、他にも仕様があるかと思いますが。。。）

そのうえで、「戻り値が Promise の必要がある」というのが分かりませんでした。

.then は Promiseオブジェクトが 待機状態から履行状態などに決定した際に実行するただのハンドラーではないのでしょうか。

戻り値が Promise の必要があるというのは、Promiseオブジェクトを生成する際の話ではなく、.then()内の話になるのでしょうか。

（とほほ様ページ内「aFunc2(data)」でも Promiseが返り値に指定されており、「sample_promise()内の.then()」は、ただ aFunc2(100)から受け取った値をコンソールに表示しているだけに見えるのですが。）

的外れな質問をしていたら大変申し訳ございません。

[maisumakun]

> .then は Promiseオブジェクトが 待機状態から履行状態などに決定した際に実行するただのハンドラーではないのでしょうか。

もちろん、ただのハンドラとして使うこともできます。ただし、.then（その1とします）のハンドラーが「Promiseを返すならば」、その1の後につなげる.then（その2）は「その1のハンドラーが返したPromiseの完結を待つ」というようになっています。

thenその1でPromiseを返さなければ、thenその2はすぐに実行されます。

[maisumakun]

あと、setTimeoutは引数の関数を遅延実行させるだけで周囲の実行順には影響しないこと、具体的には

setTimeout(() => console.log('100ミリ秒後に表示'), 100);
console.log('こちらが先に表示される');

ことは大丈夫でしょうか。

[krnkn6]

> 「Promiseを返すならば、その1のハンドラーが返したPromiseの完結を待つ」
そのような仕様があったのですね！
理解できました。
ありがとうございます！

setTimeoutの実行順に関しては大丈夫です。

Answer 2

単純にコールバックから別の処理をネストすると、遅延分どんどん処理がおくれていき、普通に並列で動かしているものに抜かれるという図式では？

const pass=(txt=null,start=0)=>{
  const pass=performance.now()-start;
  if(txt) console.log(`${txt}:${pass}`);
  return pass;
}
const start=pass();
setTimeout(()=>{
  pass('a1',start);
  setTimeout(()=>{
    pass('a2',start);
    start;setTimeout(()=>{
      pass('a3',start);
    },1000);
  },1000);
},1000);
setTimeout(()=>pass('b1',start),1000);
setTimeout(()=>pass('b2',start),2000);
setTimeout(()=>pass('b3',start),3000);

Comments

[krnkn6]

2つ目以降の.thenが即時に実行されることから、並列処理の分ネスト処理よりも先に実行されていたということですね。
理解できました！
ありがとうございます！