0

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

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

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

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

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

4

2 回答 2

1

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

Chrome 开发者工具

使用请求动画帧的更新示例（首先在这里查看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 回答