Promiseを設定しているのにJavaScriptが上から順に実行されない

Question

こちらのサイトを参考にPromiseを設定したのですが、同時に実行されてしまいます。
実際の挙動とコードはこちらをご参照ください。

52行目で

promise[0].then(promise[1]).then(promise[2]).then(promise[3]);

としているのですが、promise[1],promise[2],promise[3]が同時に実行されてしまいます。
それぞれ、特定の四角いブロックを一番上のブロックから一番下のブロックまで赤色に塗る関数です。

対処法の分かる方いらっしゃいましたらご教示ください。

Answer 1

promise[1],promise[2],promise[3]が同時に実行されてしまいます。

はい、Promiseはnewしたタイミングで実行が始まります。promise[0].then(promise[1]).then(promise[2]).then(promise[3]);の行は、何の意味も持ちません。

Answer 2

メソッドチェーンでpromiseを戻していますか？

new Promise(resolve=>setTimeout(()=>{resolve(1)},300)).then(res=>{
  console.log(res);
  return new Promise(resolve=>setTimeout(()=>{resolve(2)},200));
}).then(res=>{
  console.log(res);
  return new Promise(resolve=>setTimeout(()=>{resolve(3)},400));
}).then(res=>{
  console.log(res);
  return new Promise(resolve=>setTimeout(()=>{resolve(4)},100));
}).then(res=>{
  console.log(res);
})