実装したjQueryのコードレビューをお願いします。

Question

以下のように、settimeout()を駆使して、コンテンツの表示が切り替わるプログラムを書きましたが、settimeout()がずらずら並ぶのでいいのか？という疑問があり、また自身も経験が浅いため、動くには動くが、これでいいのか？という自信がありません。

確認お願いします。

    function startTimer() {
      time--;
      if (time === 0) {
        $('#timer').html(totalTime).css("color", "#83C596");
        clearInterval(interval);
        setTimeout(function () {
          $('#mission-window-loading').show();
        $('#mission-window-during').css("display","none");
        },1000);

        setTimeout(function () {
          $('#mission-window-loading').show();
        $('#mission-window-during').css("display","none");
        },1000);

        setTimeout(function () {
          $('#mission-window-achieve').show();
        $('#mission-window-loading').css("display","none");
        },5000);

        setTimeout(function () {
          $('#mission-window').removeClass('mission-window-fixed');
        },10000);

        setTimeout(function () {
          $('#mission-window-complete').removeClass('mission-window-fixed');
        },13000);


      } else {
        calc();
      }

    }

Comments

[m.ts10806]

html，cssも提示してください

[m.ts10806]

calc()の定義も

Answer 1

この程度でしたら、今のままでもよいのではないでしょうか。

• もっと手順が増えるようなら、データドリブンにするとよいかもしれません。
• また、async await を使うとすっきりと書くことができます。

    function startTimer() {
      time--;
      if (time === 0) {
        $('#timer').html(totalTime).css('color', '#83C596');
        clearInterval(interval);
        doTimeline();
      } else {
        calc();
      }

function sleep(msec) {
  return new Promise(resolve => setTimeout(resolve, msec));
}

async function doTimeline() {
  await sleep(1000);
  $('#mission-window-loading').show();
  $('#mission-window-during').css('display', 'none');
 
  await sleep(4000);
  $('#mission-window-achieve').show();
  $('#mission-window-loading').css('display', 'none');

  await sleep(5000);
  $('#mission-window').removeClass('mission-window-fixed');

  await sleep(3000);
  $('#mission-window-complete').removeClass('mission-window-fixed');
}

Comments

[Fukusuke0604]

返信大変遅くなりました。
丁寧にありがとうございました。

やはりいろいろな書き方があるのですね。

Answer 2

全体的に何をしたいのか伝わってきませんが、jQueryが前提なら遅延処理はdelayを利用するとよいでしょう