「setTimeout」と「forを使ったループ処理」を組み合わせたプログラムを書きたいのですが、うまく動きません。

Question

JavaScriptの初学者です。
私自身の説明につたないところもあると思いますが、アドバイス頂ければと思います。

以下のコードを書いたのですが、思い通りの結果にならず困っております。

実現したい処理というのが【『1000ms後に「こんにちは」と表示される』という処理を3回繰り返す】というものです。（つまりは、時間差でこんにちはを表示してほしい...）

現状の問題は、以下のプログラムを実行すると1000ms秒後に「こんにちは」がいっぺんに3回表示されてしまうことです。

{
  for (let i = 1; i <= 3; i++) {
    const x = function() {
      console.log('こんにちは');
    };
    setTimeout(x, 1000);
  }
}

Answer 1

全部1秒後に実行されるようになっているので、

i * 1000

とすれば期待通りになると思います。

Comments

[sino3325]

ありがとうございます！
そこを修正すればよかったんですね。
とても助かりました。

[cx20]

あぁ、ようやく意味が分かりました。
---------------------------
setTimeout(x, i * 1000);
---------------------------
とすることで1秒後、2秒後、3秒後の3つのタイマーが登録されるということですね。確かにその方が簡単そうです。

Answer 2

こんな感じで如何でしょうか？

https://jsfiddle.net/cx20/g9rdaozc/

const sleep = () => new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 1000)
})

async function main() {
    for (let i = 1; i <= 3; i++) {
        console.log('こんにちは ' + i + ' 回目');
        await sleep();
    }
}

main();

＜参考＞
■ awaitできるsetTimeoutを1行で書く方法
https://qiita.com/suin/items/99aa8641d06b5f819656

Comments

[cx20]

その他の方法についてはこちらが参考になるかもしれません。

■ 【JavaScript入門】処理を一時停止するsleep機能の実現方法まとめ
https://www.sejuku.net/blog/24629

[sino3325]

ご回答ありがとうございます。
ちょっと私にはまだうまく飲み込めない知識のため、私自身もっと知識をつけてから改めて読んでみます。
貴重な参考文献を教えて下さりありがとうございます。

[cx20]

今回のケースではfake_shibeさんの回答されている方法が簡単そうです。
動作上の違いとしては、
fake_shibeさんの方法では1度に3つ分のタイマーが登録され、1秒後、2秒後、3秒後に表示がおこなわれます。
私の提示したやり方は、1回表示する毎に1秒を待つ処理を入れている
といった違いになります。