0

デモンストレーション: http://jsfiddle.net/calvintennant/NrJ8T/show/

次のようにしてウィンドウのサイズを強制的に変更する$(window).resize()と、リスナーが呼び出され、すべて問題ありません。ただし、実際にウィンドウのサイズを変更すると、同じフレーム内で複数のサイズ変更イベントが呼び出されます。

強制サイズ変更中のタイムライン: タイムライン

自然なサイズ変更中のタイムライン: タイムライン

これは Chrome のバグですか、それとも何か誤解していますか?

4

2 に答える 2

1

@avram-lavinsky が指摘したように、サイズ変更イベントはフレームごとに複数回呼び出すことができます。

Chrome デベロッパー ツール

Request Animation Frame を使用した更新された例 (ここで最初に表示されたhttps://developer.mozilla.org/en-US/docs/Web/Reference/Events/resize ):
http://jsfiddle.net/calvintennant/v69WW/

# HTML 
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>

# CSS  
html, body {
    margin: 0;
}
.box-1 {
    background: #00F;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.box-2 {
    background: #0F0;
    height: 30px;
    position: relative;
}
.box-3 {
    background: #F0F;
    height: 66px;
    position: relative;
}

# JS
var box1 = $('.box-1');
var box2 = $('.box-2');
var box3 = $('.box-3');
var drawing = false;
var resizeFired = false;
var requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame;

$(window).resize(function() {
    // set resizedFired to true and execute drawResize if it's not already running
    if (drawing === false) {
        resizeFired = true;
        drawResize();
    }
});

function drawResize() {
    var height;
    // render friendly resize loop
    if (resizeFired === true) {
        resizeFired = false;
        drawing = true;

        height = $(window).height();
        height -= $(box2).height();
        height -= $(box3).height();
        $(box1).height(height);

        requestAnimationFrame(drawResize);
    } else {
        drawing = false;
    }
}
$(window).resize();
于 2013-09-20T16:13:38.420 に答える
0

ユーザー アクションとしてのウィンドウのサイズ変更はリアルタイム イベントです。ユーザーがドラッグすると、何度も発火します。

于 2013-09-06T18:31:01.347 に答える