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

Question

コンソールに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++;
   　　});
    }

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

Comments

[yambejp]

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

[int32_t]

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

[aki0000]

＠yambejpさん
質問ありがとうございます。ちょっと違うようです。
yambejpさんに解釈頂いた事が希望です。

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

Answer 1

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

var loop = 1;
console.log(loop);
var target = $(document);
while (loop <= 10) {
    console.log("aaa");
    target.queue(function(){
      console.log('bbb');
      target.dequeue();
    }).delay(1000)
    loop++;
}

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

---

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

Answer 2

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

(async()=>{
var loop = 1;
while (loop <= 10) {
  console.log("aaa");
  await new Promise(resolve=>setTimeout(()=>{
    console.log("bbb");
    resolve();
  }, 1000));
  loop++;
}
})();

意図が違うようでしたら希望する内容を追記ください

Comments

[int32_t]

await new Promise(resolve => setTimeout(resolve, 1000));
console.log("bbb");

のほうが簡潔かなと思います。

[aki0000]

yambejpさん
不明瞭な質問にも関わらず意図をくみ取っていただきありがとうございます。
希望通りです。おかげ様で理解深まりました。本当にありがとうございます。

int32_tさん
簡潔になる提案ありがとございます。試しながら理解深めていきます。