Javascriptの「setInterval」と「clearInterval」を使用してフェードモーションを管理

トップページなどのメインイメージの切り替えをする際、自動と手動を組み合わせて行うことも多いですが、「setInterval」と「clearInterval」で時間の管理をしっかり行わないと均一に処理が行われなくなることがあるので実装方法をメモ。

Javascript

$(function(){
	//画像の数を数えてナビゲーションを設置
	var fadeSize = $('.fanc__fadeimage ul li').length;
	var fadeOrder = [];
	for (var i = 0; i < fadeSize; i++){
		fadeOrder.push('<li><a href=""></a></li>');
	}
	$('.fanc__fadeimage__nav ol').html(fadeOrder);
	$('.fanc__fadeimage__nav ol li:first-of-type a').addClass('active');
	
	//自動繰り返しの開始
	var timerId = setInterval(fadeImage, 6000);

	//ナビゲーションボタンクリック時の処理
	$('.fanc__fadeimage__nav a').click(function(){
			
		//自動繰り返しの停止
		if(timerId) {
			clearInterval(timerId);
		}

		$('.fanc__fadeimage__nav a').removeClass('active');
		$(this).addClass('active');
			
		var index = $(this).parent('li').index();
		var next = $('.fanc__fadeimage ul li').eq(index);
			
		$('.fanc__fadeimage ul li').removeClass('last-active');
		$('.fanc__fadeimage ul li.active').addClass('last-active').removeClass('active');
		next.css({'opacity':'0'}).addClass('active').animate({'opacity':'1.0'}, 2500, function(){
			//自動繰り返しの再設定
			timerId = setInterval(fadeImage, 6000);
		});					
		return false;
	
	});

});

//フェードインアニメーション関数
function fadeImage(){
	
	var fadeSize = $('.fanc__fadeimage ul li').length;
	var index = $('.fanc__fadeimage__nav a.active').parent('li').index();

	$('.fanc__fadeimage__nav ol li a').removeClass('active');
	if(index < fadeSize - 1){
		$('.fanc__fadeimage__nav li').eq(index + 1).find('a').addClass('active');
	}else{
		$('.fanc__fadeimage__nav li:first-of-type a').addClass('active');
	}

	var fadeActive = $('.fanc__fadeimage ul li.active');
	var next = fadeActive.next().length ? fadeActive.next() : $('.fanc__fadeimage ul li:first');

	$('.fanc__fadeimage ul li.last-active').removeClass('last-active');
	fadeActive.addClass('last-active').removeClass('active');
	next.css({'opacity':'0'}).addClass('active').animate({'opacity':'1.0'}, 2500);

}

HTML

<div class="fanc__fadeimage">
<ul>
<li class="active"><img src="○○○○.jpg"></li>
<li><img src="○○○○.jpg"></li>
<li><img src="○○○○.jpg"></li>
<li><img src="○○○○.jpg"></li>
</ul>
<nav class="fanc__fadeimage__nav">
<ol>
</ol>
</nav>
</div>

参考例はフェードインアニメーション「fadeImage（）」。
「setInterval」を使用して6秒ごとにがフェードインアニメーション関数の仕様で画像を自動切り替え。
停止する際に対象となる処理を指定するため「timerId」を定義しています。

ナビゲーションボタンをクリックされたときに「clearInterval」を使用して繰り返し処理を停止。
クリック時の処理を完了したのち再度「setInterval」を使用して繰り返し処理を再設定しています。

• setInterval（一定時間ごとの処理）の中断と再開。
• 【JavaScript】setIntervalを停止させたり再開させる方法・コード例
• jQueryで処理を遅延実行させる方法を解説！