ループ処理の中で処理を順番に行いたいjquery

コンソールにaaaを出力し10秒後にbbと出力させたいです。

var loop = 1;
console.log(loop);
while (loop <= 10) {
    console.log("aaa");
    setTimeout(function () {
        console.log("bbb");
    }, 1000);
    loop++;
}

このように記載してみると、aaaが出力された10秒後に、まとめてbbが10回出力されます。

そこで、次は下記のようにしてみましたが、希望通りにはなりませんでした。

    var loop = 1;
    console.log(loop);
    while (loop <= 10) {
    　　　$.when(
　　　　　　　　console.log("aaa");
   　　　　).done(function(){
   　　　　　     setTimeout(function () {
   　　　　　     　　　　console.log("bbb");
   　　　　}, 1000)
    　　　　loop++;
   　　});
    }

どのように記載すれば、実現するでしょうか。

yambejp

2021/11/16 07:11 編集

希望は1秒毎に10回、bを表示することでしょうか？ setIntervalではだめですか？ 10秒後に1回表示するなら1000を10000にしてループしなければいいのでは？

int32_t

2021/11/16 07:10

やりたいことが不明瞭です。 1つの"aaa"の10秒後(コードだと1秒後?)に1つの"bb" (コードだと"bbb")が表示されて欲しいのだろうとは思いますが、次のループの"aaa" はどういうタイミングで表示したいのでしょうか? 前の"aaa"の直後? 前の"bbb"の直後?

aki0000

2021/11/16 07:40

＠yambejpさん質問ありがとうございます。ちょっと違うようです。 yambejpさんに解釈頂いた事が希望です。＠int32_tさん記載したコードの誤りがあり、不明瞭であることご指摘ありがとうございます。推察頂いた理解であってます。次のループの"aaa"は前の"bbb"の直後が希望です。

行動規範の内容に同意します

回答2件

jQuery で書くなら、たとえばこんな感じでしょうか？

js
1var loop = 1;
2console.log(loop);
3var target = $(document);
4while (loop <= 10) {
5    console.log("aaa");
6    target.queue(function(){
7      console.log('bbb');
8      target.dequeue();
9    }).delay(1000)
10    loop++;
11}

もちろん、promise() を組み合わせて Deferred で書いてもいいです。

ただ、わざわざ jQuery を使わずに、async/await で書いた方がすっきりすると思います。

投稿2021/11/16 07:29

Lhankor_Mhy

総合スコア36960

ベストアンサー

ちょっと好意的に解釈して

javascript
1(async()=>{
2var loop = 1;
3while (loop <= 10) {
4  console.log("aaa");
5  await new Promise(resolve=>setTimeout(()=>{
6    console.log("bbb");
7    resolve();
8  }, 1000));
9  loop++;
10}
11})();