javascript - 自然窗口调整大小事件会使 Chrome 中的布局无效，而强制窗口调整大小则不会。

Question

演示:http://jsfiddle.net/calvintennant/NrJ8T/show/

当我通过执行以下操作强制调整窗口大小时: $(window).resize() 我的监听器被调用，一切都很好。但是，如果我实际调整窗口大小，我会在同一帧内调用多个调整大小事件。

强制调整大小期间的时间线:

自然调整大小期间的时间线:

这是 Chrome 中的错误，还是我误解了什么？

Answer 1

正如 @avram-lavinsky 所指出的，调整大小事件可以在每帧中多次调用。

使用请求动画帧更新了示例(首先参见此处 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();