Javascript窗口调整可能的竞争条件

Javascript window resize possible race condition

本文关键字：竞争 条件 窗口 调整 Javascript      更新时间：2023-09-26

给定以下测试用例，预期行为是在调整浏览器窗口大小时，浅蓝色元素与红色父元素的大小完全匹配。

<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"/></script>
    <style type="text/css">
    #viewport{
        width: 100%;
        height: 30%;
        background-color: red;
    }
    #child{
        background-color: lightblue;
    }
    </style>
</head>
<body>
    <div id="viewport"><div id='child'></div></div>
    <script>
        window.addEventListener( 'resize', function(){
            var width = $('#viewport').innerWidth();
            var height = $('#viewport').innerHeight();
            $('#child').css('height', height+'px');
            $('#child').css('width', width+'px');
        });
    </script>
</body>
</html>

chrome 36.0.1985.143的实际行为是，有时（尤其是在较小的窗口尺寸下）子元素的高度比父元素低5倍和/或宽1倍。如果$('#child').css('width', width+'px');被注释掉，则问题停止发生。

据报道，这个问题并没有发生在firefox上。

似乎也发现了类似的问题http://thewebivore.com/using-settimeout-win-race-condition-changing-views/然而，我无法通过暂停来缓解它<10ms，这不是真正的解决方案。

我已经把你的示例代码插入了小提琴中，我似乎还有很多其他问题。

然而，如果我使用vh和vw而不是%，我会得到更好的结果：

#viewport {
    width: 100vw;
    height: 30vh;
    background-color: red;
}
#child {
    background-color: lightblue;
}

小提琴在这里。。。

相关文章：