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

Question

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

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

强制调整大小时的时间轴：

自然调整大小时的时间轴：

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

Answer 1

窗口调整大小，因为用户操作是实时事件。 当用户拖动时，它会多次触发。

Answer 2

正如@ avram-lavinsky所指出的，每帧可以多次调用resize事件。

使用请求动画框架的更新示例（在此处首先看到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();