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

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

サンプルコード

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ミリ秒後に処理が実行されます。

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31