リサイズ $(window).resize が終了した時点で実行

CATEGORY: jQuery

2013年12月13日

リサイズのイベントは多数発生するので、リサイズが終了した時点である処理を実行する場合の方法のメモ。（「[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する」を参考にさせていただきました。）

setTimeout()メソッド: このメソッドに関数と時間（ミリ秒）を指定すると、指定した時間が経過したときに、指定した関数が実行される。また setTimeout() の戻り値（タイマーID：整数）を claerTimeout() に渡すと関数の実行が取り消される。

var timer = window.setTimeout(function(){ 何らかの処理や関数 }, 遅延時間);

リサイズが終了した時点で何らかの処理を実行する場合は以下のようにする。

var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        // リサイズが終了した時点で行う処理または関数を記述
    }, 200);
});

タイマー ID (timer) を false に
setTimeout() で 200ミリ秒後に「リサイズが終了した時点で行う処理」を指定
リサイズイベントが発生する度に、(timer !== false) が評価され timer は整数なので clearTimeout(timer)が実行され「リサイズが終了した時点で行う処理」の実行が取り消される
これにより最後のリサイズイベントの場合のみ 200ミリ秒後に「リサイズが終了した時点で行う処理」が実行される

表題とは直接関係ないが、setTimeout()メソッドを使用した場合の、他の関数との実行順について。

console.log('1');
  
window.setTimeout(function(){
    console.log('setTimeout');
}, 0);
  
console.log('2');
  
$('body').fadeOut(0, function() {
    $(this).fadeIn(0);
    console.log('3');
});

コンソールには以下のように表示される。

1
2
3
setTimeout

fadeOut のコールバック関数（fadeIn）のタイム（0 から 100 に）を変更しても結果は同じ。

console.log('1');
  
window.setTimeout(function(){
    console.log('setTimeout');
}, 0);
  
console.log('2');
  
$('body').fadeOut(0, function() {
    $(this).fadeIn(100);
    console.log('3');
});

1
2
3
setTimeout

但し、fadeOut のタイム（0 から 1 に）を変更すると順番は変わる

console.log('1');

window.setTimeout(function(){
    console.log('setTimeout');
}, 0);
  
console.log('2');
  
$('body').fadeOut(1, function() {
    $(this).fadeIn(0);
    console.log('3');
});

1
2
setTimeout
3

以下は「JavaScript 5th Edition」より

setTimeout() を使った便利なテクニックの１つに、0 秒後に関数が呼び出されるというものがある。このような形式で setTimeout() を呼び出すと、イベントハンドラの実行が完了し、ドキュメントの更新状態が終了した時点で、指定した関数が呼び出される。ドキュメントコンテンツを取得したり、変更したりするイベントハンドラはこのテクニックを使ってドキュメントが安定した状態になるまでコードの実行を遅らせる必要がある。

Web Design Leaves

リサイズ $(window).resize が終了した時点で実行

参考サイト