JSで１秒ごとにループさせたい

Question

１秒ごとに実行をさせたいのですがsleep関数が効いていないようで１秒待つことなく実行されてしまいます。どうやら最初の１秒だけ待ってその後まとめて実行されているようです。ループ毎に１秒待つようにするにはどのようにすれば良いでしょうか？

以下コードです。

  function sleep(waitSec: any) {
    return new Promise(function (resolve: any) {

      setTimeout(function () { resolve() }, waitSec);

    });
  }

  useEffect(() => {
    posts!.forEach((post: any) => {
        sleep(1000)
          .then(() => {
            console.log("1秒ごとに表示されるはず")

            getPost(post.id)
              .then((res) => {

                allPosts.push(res.post)

              })
              .catch(res => console.log("失敗"))
          })
      })
  }, [])

ご教示いただければ幸いです。よろしくお願いいたします。

Answer 1

Promiseが並列なので直列にすると良いのではないかと思います。

posts!.reduce((seriesPromise: Promise<void>, post: any) => seriesPromise.then(() => sleep(1000).then(() => {                                                                                                  
    console.log("1秒ごとに表示されるはず");
    getPost(post.id)
      .then((res) => {allPosts.push(res.post)})
      .catch((_) => {console.log('失敗');});
  })), Promise.resolve());

もっと簡単に実現する場合、setIntervalで1秒ごとに処理すると良いかもしれません。

Answer 2

なんかよーわからんことをしてますが、
setTimeoutの使い方を今一度調べてみては

あと、setIntervalってのはどーなんでしょう

Answer 3

forEachは、Promiseがどうとかと無関係にループを実行してしまうので、このコードだと「1秒遅延させる」というのを全要素に対して一気にセットするだけになってしまいます。

「遅延させながらループさせたい」のであれば、async関数の中でfor-ofでループを回し、要素ごとにawaitさせる、というのがスッキリ書けるかと思います。

Comments

[yaha4967]

皆さまご回答ありがとうございました！

maisumakun様のやり方で実装できましたのでベストアンサーとしたいと思います。ありがとうございました！