kkAyataka/js-console-group.html

## js-console-group.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <!--
      ボタンを連続3回クリックしたときのログ

      counter: 0, 2000
      console.group
        counter: 1, 1500
        console.group
          counter: 2, 1000
          console.group     <- 3回押した分だけgourpが作られる
            counter: 2-1    <- スリープ時間が短い3回目のクリックから表示
            counter: 1-1
            counter: 0-1
            counter: 2-2    <- 順番にgroupを抜ける
          counter: 1-2
        counter: 0-2
    -->

    <script>
      function sleep(ms) {
        return new Promise((resolve) => {
          setTimeout(() => resolve(), ms);
        });
      }

      let gcounter = 0;
      const timeouts = [2000, 1500, 1000]
      async function btn_onclick() {
        const counter = gcounter++;
        const ms = timeouts[counter % 3];

        console.log(`counter: ${counter}, ${ms}`);

        console.group();

        await sleep(ms);
        console.log(`counter: ${counter}-1`);

        await sleep(ms);
        console.log(`counter: ${counter}-2`);

        console.groupEnd();
      }
    </script>

    <button onclick="btn_onclick()">ボタン</button>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<!--
	ボタンを連続3回クリックしたときのログ

	counter: 0, 2000
	console.group
	counter: 1, 1500
	console.group
	counter: 2, 1000
	console.group <- 3回押した分だけgourpが作られる
	counter: 2-1 <- スリープ時間が短い3回目のクリックから表示
	counter: 1-1
	counter: 0-1
	counter: 2-2 <- 順番にgroupを抜ける
	counter: 1-2
	counter: 0-2
	-->

	<script>
	function sleep(ms) {
	return new Promise((resolve) => {
	setTimeout(() => resolve(), ms);
	});
	}

	let gcounter = 0;
	const timeouts = [2000, 1500, 1000]
	async function btn_onclick() {
	const counter = gcounter++;
	const ms = timeouts[counter % 3];

	console.log(`counter: ${counter}, ${ms}`);

	console.group();

	await sleep(ms);
	console.log(`counter: ${counter}-1`);

	await sleep(ms);
	console.log(`counter: ${counter}-2`);

	console.groupEnd();
	}
	</script>

	<button onclick="btn_onclick()">ボタン</button>
	</body>
	</html>