jQueryで「setTimeout」の中断

Question

###質問
「setTimeout」を中断する方法について

###現状の問題
モーダルの表示切替と併せてsetTimeoutでのイベントを実行させているのですが、実行のさなかにモーダルを閉じ、直後に開くと、いまだにsetTimeoutが処理中であるために意図する動作になりません。

たとえば次の意図する動作があるとして、

➀ opneクリック

➁ modal表示
➂ setTimeoutでhello表示
➃ setTimeoutでhello非表示
➄ setTimeoutでmodal非表示

しかし➁の直後にユーザーによってmodalが閉じられても、➂➃➄のsetTimeoutは処理中なので、

ユーザーがmodalを閉じてすぐまたopenをクリックすると、setTimeoutが続きから処理されてしまうといった状態です。
（たとえば➀➁➂➃➄でなく、➀➁➄➂➃➄のようになってしまう。）

###該当のコード

<div class="open">open</div>

<div class="modal">   
  <div class="hello">hello</div>
</div>

.modal {
    display: none;  
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}
.hello {
    display: none;    
    background: rgba(255,255,255,1);
    width: 100px;
    height: 100px;
    padding: 10px;
}

// hello表示アクション
function Action(){	
  setTimeout(function(){
    $('.hello').fadeIn();
  },500);
  setTimeout(function(){
    $('.hello').fadeOut();
  },2000);  
  setTimeout(function(){
    $('.modal').css('display','none');
  },2500);   
}	

// openクリックでhelloを表示
$(".open").on("click", function(){
  $('.modal').css('display','flex');
  Action();
});

// modalの全体クリックでmodalもHelloも非表示
$(".modal").on("click", function(){
  $('.modal').css('display','none');
  $('.hello').css('display','none');
  /* ここでActionのsettimeoutを中断させたい */
});

そこで必要になるのがjQueryの最後の行でコメントアウトしてあるような

/* ここでActionのsettimeoutを中断させたい */

になってくるかと思うのですが、そのためにはどのような書き方があるでしょうか？

###補足

上のコードはあくまで例なので、意図する動作を叶えさせるまったく別の書き方を知りたいというのではなく、上の書き方のままで「setTimeout」を中断する方法について知りたいと考えています。

また、Action.preventDefault() とするとこれでは中断でなく完全停止になってしまうので、イメージと違います。openクリックでいつでも再開させたいです。

宜しくお願い致します。

Answer 1

setTimeout()で戻り値が返ってきますからそれを覚えておいて、
clearTimeout(その値)で止まります。

（それでは実現できないということでしょうか？）

ざっと調べた感じ、次のように書けばいいかなと思いましたがこれではできませんでした。

var をつけるとローカル変数になってしまうので外に出して、こんな感じです。

var action1=null;
var action2=null;
var action3=null;

// hello表示アクション
function Action(){    
  action1 = setTimeout(function(){
    $('.hello').fadeIn();
  },500);
  action2 = setTimeout(function(){
    $('.hello').fadeOut();
  },2000);  
  action3 = setTimeout(function(){
    $('.modal').css('display','none');
  },2500);   
}    

// openクリックでhelloを表示
$(".open").on("click", function(){
  $('.modal').css('display','flex');
  Action();
});

// modalの全体クリックでmodalもHelloも非表示
$(".modal").on("click", function(){
  $('.modal').css('display','none');
  $('.hello').css('display','none');
  /* ここでActionのsettimeoutを中断させたい */

  if( action1 ) clearTimeout(action1);
  if( action2 ) clearTimeout(action2);
  if( action3 ) clearTimeout(action3);
});

Comments

[parinpurin23]

戻り値、返ってくる、覚えておく、それを止める。いずれの用語も分かりません…。

ざっと調べた感じ、次のように書けばいいかなと思いましたがこれではできませんでした。

// hello表示アクション
function Action(){
var action1 = setTimeout(function(){
$('.hello').fadeIn();
},500);
action1();
var action2 = setTimeout(function(){
$('.hello').fadeOut();
},2000);
action2();
var action3 = setTimeout(function(){
$('.modal').css('display','none');
},2500);
action3();
}

// openクリックでhelloを表示
$(".open").on("click", function(){
$('.modal').css('display','flex');
Action();
});

// modalの全体クリックでmodalもHelloも非表示
$(".modal").on("click", function(){
$('.modal').css('display','none');
$('.hello').css('display','none');
/* ここでActionのsettimeoutを中断させたい */
clearTimeout(action1);
clearTimeout(action2);
clearTimeout(action3);
});

[parinpurin23]

ありがとうございます。できました。

Answer 2

fadeIn、fadeOutだと分かりづらいので背景色を変えるサンプル

<script>
$(function () {
  var ids=[];
  $('#start').on('click',function(){
    $('.hello').css({backgroundColor:"white"});
    ids[0]=setTimeout(function(){
      $('.hello').css({backgroundColor:"yellow"});
    },500);
    ids[1]=setTimeout(function(){
      $('.hello').css({backgroundColor:"lime"});
    },1500);
    ids[2]=setTimeout(function(){
      $('.hello').css({backgroundColor:"aqua"});
    },2500);   
  });
  $('#stop').on('click',function(){
    ids.forEach(function(id){clearTimeout(id);});
  });
});
</script>

<div class="hello">hello</div>
<input type="button" id="start" value="start">
<input type="button" id="stop" value="stop">

Comments

[parinpurin23]

ありがとうございます。taka-saanのご回答を配列にして１行でまとめるバージョンですね。参考にさせて頂きます。