jQueryの基礎 ブラウザのウィンドウサイズ変更アクションを検知する
update :
jQueryを利用してユーザーがブラウザのウィンドウサイズ変更したタイミングを検知します。ブラウザのウィンドウサイズ変更に合わせて処理をしたい場合などに便利な機能です。合わせてsetTimeout関数を用いてブラウザのウィンドウサイズ変更完了時に処理を実行する方法も紹介します。
resizeメソッドを利用してブラウザのウィンドウサイズの変更アクションを検知する
基本的なコードは以下の通りです。このままだと少しでもブラウザのウィンドウサイズが変更される度に処理が実行されますので、ブラウザのサイズ変更完了後に処理をしたい場合はsetTimeout関数と併用すると良いです。
$(window).resize(function() {
//リサイズされたときの処理
});
setTimeout関数との併用でブラウザのウィンドウサイズ変更完了後に処理を実行する
ちょっと複雑なのですが、難しいことは置いておいてとりあえずは以下のコードを実行してみましょう。
// |
// | 前提処理
// | setTimeoutの挙動を格納する変数の評価をfalseにしておく
// |
var setTimeoutProcess = false;
// |
// | リサイズされたときの処理
// |
$(window).resize(function() {
if (setTimeoutProcess !== false) {
// |
// | 評価がfalse場合はsetTimeoutのタイマーをリセットする
// |
clearTimeout(setTimeoutProcess);
}
setTimeoutProcess = setTimeout(function() {
// |
// | 300ミリ秒後に実行される処理
// |
alert("ウィンドウが変更されましたね？");
}, 300);
});
このコードはブラウザのウィンドウサイズの変更完了後にアラートが発生する処理なのですが、resizeメソッドのみで処理してしまうとウィンドウサイズを変更した瞬間にアラートが発生してしまいます。これをsetTimeout関数を用いてウィンドウサイズの変更完了時にアラートが発生するようにしています。正確には変更完了を検知しているのではなく、ウィンドウサイズ変更後、再度のウィンドウサイズ変更処理が300ミリ秒の間発生しなかった場合を検知しています。