リサイズが完了した後に処理を行う

リサイズのイベントはリサイズ中常に発生してしまうので、リサイズが完了した後に何らかの処理を行う方法をメモ。

サンプルコード

JavaScript

$(function() {
	$(window).on('resize', function() {
		var winWidth = $(window).width();
		var winHeight = $(window).height();
		console.log('幅:' + winWidth + '__高さ:' + winHeight);
	});
});

通常時のデモページ
この場合、リサイズを行っている間ずっとconsoleを出力し続けます。
　

JavaScript

$(function() {
	var resizeTimer = null;
	$(window).on('resize', function() {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function() {
			// リサイズ完了後の処理
			var winWidth = $(window).width();
			var winHeight = $(window).height();
			console.log('幅:' + winWidth + '__高さ:' + winHeight);
		}, 200);
	});
});

リサイズ完了後に処理を行うデモページ
setTimeoutを使用して、200ミリ秒後に処理を実行するようにします。
リサイズ中はclearTimeoutでsetTimeoutをキャンセルするので、リサイズが完了した200ミリ秒後に処理が実行されます。