7

以下のコードを実行しました

$(document).ready(function() {

    var ivar = 0;

    $(window).resize(function() {
        console.log('$(window).height() ' + $(window).height() + ' - ' + ++ivar);
    });
});​

サイズを変更するたびに、イベントが2回発生することがわかりました。つまり、カウンター「ivar」が2回インクリメントされます。

カウンターが2回インクリメントされるサイズ変更イベントで何が起こっているのか教えてもらえますか

* *編集: 1. ウィンドウ バーをダブルクリックして、ウィンドウのサイズを変更しています。

ありがとう

4

2 に答える 2

9

それは非常によく知られている問題です。一部のブラウザーでは、サイズ変更が 2 回呼び出されます。ユーザーがウィンドウのサイズ変更を停止したときにのみ関数が呼び出されるように、タイマーを作成できます。方法は次のとおりです。

var globalTimer = null;

$(window).resize(function() {
    clearTimeout(globalTimer);
    globalTimer = setTimeout(doneResize, 500);
});

function doneResize(){
  console.log('$(window).height() ' + $(window).height() + ' - ' + ++ivar);   
}​
于 2012-11-06T05:08:02.523 に答える
6

ウィンドウのresizeサイズが変更されるたびに、イベントがトリガーされます。イベントがトリガーされる頻度は保証されません。ブラウザーは、マウス カーソルがコーナーをドラッグするとすぐにサイズ変更をトリガーすることを決定し、コンテンツを継続的に再描画できるように、マウスが離されるまでそれを続けます。最後のイベントは、マウス ボタンが離されたときにカウントされるイベントです。

これは、ブラウザ ウィンドウをダブルクリックして最大化した場合にも発生することがあります。OS は、複数のサイズ変更イベントをブラウザーに送信して、ウィンドウの内容をアニメーション化することを決定する場合があります。正確に再描画したいブラウザーは、イベントをさらに伝播する可能性があり、アニメーションが非常に高速であっても、2 倍のサイズ変更が発生する可能性があります。

Kir Ivlevが示唆するように、各サイズ変更後、別のサイズ変更が行われるかどうかを確認するために少し待つことができます。その場合は、待機を延長します (待機を停止して再度待機します)。

于 2012-11-06T05:20:57.597 に答える