###質問
「setTimeout」を中断する方法について
###現状の問題
モーダルの表示切替と併せてsetTimeoutでのイベントを実行させているのですが、実行のさなかにモーダルを閉じ、直後に開くと、いまだにsetTimeoutが処理中であるために意図する動作になりません。
たとえば次の意図する動作があるとして、
➀ opneクリック
➁ modal表示
➂ setTimeoutでhello表示
➃ setTimeoutでhello非表示
➄ setTimeoutでmodal非表示
しかし➁の直後にユーザーによってmodalが閉じられても、➂➃➄のsetTimeoutは処理中なので、
ユーザーがmodalを閉じてすぐまたopenをクリックすると、setTimeoutが続きから処理されてしまうといった状態です。
(たとえば➀➁➂➃➄でなく、➀➁➄➂➃➄のようになってしまう。)
###該当のコード
html
1<div class="open">open</div> 2 3<div class="modal"> 4 <div class="hello">hello</div> 5</div>
css
1.modal { 2 display: none; 3 justify-content: center; 4 align-items: center; 5 position: fixed; 6 top: 0; 7 right: 0; 8 bottom: 0; 9 left: 0; 10 background: rgba(0,0,0,0.5); 11} 12.hello { 13 display: none; 14 background: rgba(255,255,255,1); 15 width: 100px; 16 height: 100px; 17 padding: 10px; 18}
jQuery
1// hello表示アクション 2function Action(){ 3 setTimeout(function(){ 4 $('.hello').fadeIn(); 5 },500); 6 setTimeout(function(){ 7 $('.hello').fadeOut(); 8 },2000); 9 setTimeout(function(){ 10 $('.modal').css('display','none'); 11 },2500); 12} 13 14// openクリックでhelloを表示 15$(".open").on("click", function(){ 16 $('.modal').css('display','flex'); 17 Action(); 18}); 19 20// modalの全体クリックでmodalもHelloも非表示 21$(".modal").on("click", function(){ 22 $('.modal').css('display','none'); 23 $('.hello').css('display','none'); 24 /* ここでActionのsettimeoutを中断させたい */ 25});
そこで必要になるのがjQueryの最後の行でコメントアウトしてあるような
/* ここでActionのsettimeoutを中断させたい */
になってくるかと思うのですが、そのためにはどのような書き方があるでしょうか?
###補足
上のコードはあくまで例なので、意図する動作を叶えさせるまったく別の書き方を知りたいというのではなく、上の書き方のままで「setTimeout」を中断する方法について知りたいと考えています。
また、Action.preventDefault() とするとこれでは中断でなく完全停止になってしまうので、イメージと違います。openクリックでいつでも再開させたいです。
宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/01 07:20 編集
2018/11/01 08:10