【jquery】addClassを遅延して一つずつ発火させるアニメーションを作る時の注意

クリックしたら一つずつ要素に遅延しながらclassが付与されるようにしたかったんだけど一筋縄で実装出来なかったときの備忘録

delay()を使って遅延させながらClassを付与

delay()を使えば遅延処理を行うことができるんだけど、基本的にエフェクト系のfadeIn()やslideUp()みたいなエフェクト系のメソッドにしか使えないみたいでaddClass()みたいなメソッドの時はqueue()メソッドを使ってキューに登録する必要性があるみたい

だから以下のような書き方になる

$(this).delay(300 * i).queue(function(){
    $(this).addClass('active').dequeue();
});
// ※下記コードの一部抜粋

dequeue()は必須で、これで登録したキューを削除している
これを指定しないとactiveクラスを付与した後にactiveを削除する関数を用意しても動かない
エフェクト系のメソッドは自動でキューを削除しているけど自分でキューに登録すると自分で削除する記述を書く必要性がある

サンプルコード

クリックしたらactiveクラスが遅延しながら付与される処理

<style>
	.active{
		background: red;
	}
</style>

<ul>
	<li>テスト1</li>
	<li>テスト2</li>
	<li>テスト3</li>
	<li>テスト4</li>
	<li>テスト5</li>
	<li>テスト6</li>
	<li>テスト7</li>
	<li>テスト8</li>
	<li>テスト9</li>
</ul>

<button type="button">クリック</button>

<script>
jQuery(function($) {

	function addClass(){
		var list = $('li');
		list.each(function(i) {
			console.log($(this));
			$(this).delay(300 * i).queue(function(){
			    $(this).addClass('active').dequeue();
			});
		});
	};
	function removeClass(){
		$('li').removeClass('active');
	};
	$('button').on('click', function(){
		if($('li').hasClass('active')){
			removeClass();
		}else{
			addClass();
		}
	});
});
</script>

ただ一つ問題があって、今回みたいにクリックすると遅延しながらClassが付与されて、もう一度クリックしたらClassが削除される処理を用意したときに処理を途中で止められないんだよね
処理の途中でボタンを再クリックすると既に反映済みのClassは削除されるんだけどそれ以降は実行されちゃう

原因としては、each()でリストの数だけ処理を最初に全て行って、一つずつClassが付与されている時にはただ遅延が反映されているだけで処理自体は完了しちゃってるんだよね

だから、breakとか使って途中で止めようと思って色々と試したけど止まらなかった
だってすでに処理は完了済みなんだもん

結局途中で処理を辞めさせる方法がわからなかったからcssのアニメーションの方を使って解決した