リサイズやスクロール時に1回だけ処理を行う

resizeやscrollは通常イベントが発生する毎に処理を行いますが、イベント発生毎ではなく、特定のときに1回だけ処理を行いたいという時がよくあります。
今回は特定の状態になったら処理を行い、それ以降は処理を行わないような実装を試してみます。

サンプルコード

スクロールで特定の位置まで来たら、要素のアニメーションを1回だけ行うようにしてみます。
まずは特に対応しなかった場合です。

HTML

<div class="box"></div>

CSS

.box {
	position: absolute;
	top: 1000px;
	left: 100px;
	width: 200px;
	height: 200px;
	background: #ccc;
}

JavaScript

$(function() {
	$(window).on('scroll', function() {
		// スクロール位置と画面高さを取得
		var scTop = $(window).scrollTop();
		var winHeight = $(window).height();

		// 対象要素の位置と高さ取得
		var tgtTop = $('.box').offset().top;
		var tgtHeight = $('.box').height();

		if(winHeight + scTop >= tgtTop + tgtHeight) {
			$('.box').animate({
				left: 200
			}, 500).animate({
				left: 100
			}, 500);
		}
	})
});

スクロールで特定の位置まで来たらアニメーションを行うデモページ
この場合、特定の位置以降でスクロールした場合も毎回アニメーションが発生してしまいます。

対応後のコードが以下になります。

JavaScript

$(function() {
	var animationFlag = false;
	$(window).on('scroll', function() {
		// スクロール位置と画面高さを取得
		var scTop = $(window).scrollTop();
		var winHeight = $(window).height();

		// 対象要素の位置と高さ取得
		var tgtTop = $('.box').offset().top;
		var tgtHeight = $('.box').height();

		if(winHeight + scTop >= tgtTop + tgtHeight) {
			if(!animationFlag) {
				animationFlag = true;
				$('.box').animate({
					left: 200
				}, 500).animate({
					left: 100
				}, 500);
			}
		}
	})
});

スクロールで特定の位置まで来たら1回だけアニメーションを行うデモページ
アニメーションしたかどうかをanimationFlagという変数で管理しています。
アニメーションを1回実行したら変数の値を変更して、2回目以降は処理を行わないようにします。
　

サンプルコード2

リサイズでPCサイズからSPサイズ、またはSPサイズからPCサイズになった時に1回だけ処理を行ってみます。

JavaScript

var widthFlag = '';
$(function() {
	// 画面サイズのチェック
	$(window).on('load resize', function() {
		widthCheck();
	});
});

// 画面サイズのチェック
function widthCheck() {
	// 画面幅取得
	var winWidth = $(window).width();

	// 画面幅640以下でフラグがspでない時
	if(winWidth <= 640 && widthFlag != 'sp') {
		// フラグをSPに変更
		widthFlag = 'sp';
		console.log('spの処理');

	// 画面幅640よりおおきく、フラグがpcでない時
	} else if(winWidth > 640 && widthFlag != 'pc') {
		// フラグをPCに変更
		widthFlag = 'pc';
		console.log('pcの処理');
	}
}

リサイズでPCからSP、SPからPCに変更した時に1回だけ処理を行うデモページ
先ほどと同じく、widthFlagという変数で現在がSPなのかPCなのかを管理して、変更があったときに1回だけ処理を行うようにしています。