jQueryで「setTimeout」の中断

Question

チェックしたら上から「チェックしました」とスライド表示して、５秒後に上にスライドで戻したいです。

大体はできているものの、チェックを連続したときにうまくいきません。

２秒で戻ったり、１秒で戻ったり、一貫性がないように見えます。（以前のアニメーション（setTimeout）が残っている？）

調べてみたところ、setTimeoutのリセットにはclearTimeoutを使えばいいようですが、今回のソードに合うような使い方がわかりません。

どのようにしたら、連続チェックしてもきちんと５秒の動作になるでしょうか？

<main id="main">
<input type="checkbox">
<input type="checkbox">
</main>

function info(action,state){ 
	$('#info').remove();
	// 表示
	if( action=='clip' ){
		var mes = state=='on' ? 'チェックしました。' : '解除しました。' ;
		$('#main').prepend('<div id="info" class="animated slideInDown"><p>'+mes+'</p></div>');	
		var time1 = 5000;
		var time2 = 5200;
	}
	// アニメーション
	info1 = setTimeout(function(){
		$('#info').addClass('slideOutUp').removeClass('slideInDown');
	},time1); 
	info2 = setTimeout(function(){
		$('#info').remove();
	},time2);					
}  
	
$(document).on("change","input", function(){
	if( $(this).prop('checked') == true ){
		info('clip','on');		
	}else{
		info('clip','off');
	}
});	

#main {
  background:bisque;
}
#main input {
  margin: 50px 0 0 0;
}
#info {
  position:fixed;
  top:0;
  right:0;
  left:0;
  background: red;
}
p {
  margin:0;
}

/* アニメーション */
.animated {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* スライドアップ */
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

/* スライドダウン */
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

あまり大掛かりにコードは変えずに、上のjQueryにclearTimeoutを適用させるような書き方が知れれば幸いです。

JSfiddleにサンプルを置きました。よろしければお試しいただければと思います。
https://jsfiddle.net/Lewvo30u/

Comments

[kei344]

「５秒の動作」は連続でチェックした物が5秒ずつ順番に動くのでしょうか。それとも最後のチェックのみ実行するのでしょうか。

[parinpurin23]

なるほど。最後のチェックのみを考えています。「最後のチェック操作についての#infoだけが表示→５秒後に非表示」とさせたいので、「それ以外の#infoとそのアニメーションはすべて取り消したい」ということです。

Answer 1

こういう挙動でよいですか？

var info1, info2;
function info(action,state){ 
  var time1 = 0;
  var time2 = 0;
  $('#info').remove();
  clearTimeout( info1 );
  clearTimeout( info2 );
  // 表示
  if( action=='clip' ){
    var mes = state=='on' ? 'チェックしました。' : '解除しました。' ;
    $('#main').prepend('<div id="info" class="animated slideInDown"><p>'+mes+'</p></div>');	
    time1 = 5000;
    time2 = 5200;
  }
  // アニメーション
  info1 = setTimeout(function(){
    $('#info').addClass('slideOutUp').removeClass('slideInDown');
  },time1); 
  info2 = setTimeout(function(){
    $('#info').remove();
  },time2);					
}  

$(document).on("change","input", function(){
  if( $(this).prop('checked') == true ){
    info('clip','on');		
  }else{
    info('clip','off');
  }
});	
```**動くサンプル：**[https://jsfiddle.net/zt2g3sxd/](https://jsfiddle.net/zt2g3sxd/)

---


【window.clearTimeout - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearTimeout](https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearTimeout)

Comments

[parinpurin23]

どうもありがとうございます！！理想的です。完璧にベストアンサーです。

以下、もしお暇でしたら教えていただきたいのですが、

➀
var info1, info2;
というのは、

var info1 = null;
var info2 = null;
と同じ意味でしょうか？

➁
time1 = 5000;
time2 = 5200;
はなぜvarが不要なのでしょうか？

[kei344]

> 同じ意味でしょうか？
厳密には違います。nullではなくundefinedです。

【undefined - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN】
https://developer.mozilla.org/ja/docs/Glossary/Undefined

> はなぜvarが不要なのでしょうか？
関数の最初で下記のように宣言しているからです。（var は関数内がスコープなので先頭に有っても問題ありません）
var time1 = 0;
var time2 = 0;
なぜ最初に持ってきたかというと、ifに入らなかった場合でもsetTimeoutの引数として変数を使用しているので、初期値を設定しました。

[parinpurin23]

ご返信ありがとうございます。

undefinedでしたか。使いわけがまったくわからないのでリンク先参考になります。

宣言済みの変数であればvarは不要なんですね。毎回書いてました。勉強になりました。