月別アーカイブ: 2013年10月

jQueryを使ったリサイズエンドイベント(メモ)


リサイズイベントはデフォルトのものがあっても、
リサイズエンドイベントはないですよね。

リサイズするたびに実行すると重くなるような関数のときは、
リサイズエンドのときだけ実行したい場合がある。
そんなときに使えそうな手法です。

▼リサイズエンドイベント

$(function() {
	var obj = {
		resizeTimer:0,
		resizeCheck:function(){
			// もし実行前のタイマーがあったらクリア(0.5秒以内にチェックが来たらリサイズエンドしていないと判断してリサイズエンドイベントをキャンセル)
			if (obj.resizeTimer){
				clearTimeout(obj.resizeTimer);
			}
			// リサイズエンドイベントを作成する
			// 0.5秒間、次のチェックが来なかったらリサイズエンドとみなしてobj.resizeEndを実行する
			obj.resizeTimer = setTimeout(obj.resizeEnd, 500);
		}
	};
	// リサイズエンドイベント
	obj.resizeEnd = function(){
		//ここにリサイズエンドの処理を書く
	}
	// 通常のリサイズイベント
	$(window).on('resize', function (e) {
		obj.resizeCheck(); // リサイズのたびにチェック関数の飛ばす
	});
});

このサンプルの場合、0.5秒間リサイズされなかったら、
リサイズエンドとみなします。