Javascript 如何计算窗口大小调整的大小更改百分比？_Javascript_Jquery_Html_Jquery Plugins_Resize

Javascript 如何计算窗口大小调整的大小更改百分比？

javascript jquery html jquery-plugins

Javascript 如何计算窗口大小调整的大小更改百分比？,javascript,jquery,html,jquery-plugins,resize,Javascript,Jquery,Html,Jquery Plugins,Resize,我试图计算浏览器调整大小的百分比，但我似乎无法在开始调整大小之前捕获窗口的大小，然后在调整完成之后捕获窗口的大小 $(function () { var originalHeight = $(window).height(); $(window).resize(function (e) { var newHeight = $(window).height(); var percentageChange = newHeight / originalH

我试图计算浏览器调整大小的百分比，但我似乎无法在开始调整大小之前捕获窗口的大小，然后在调整完成之后捕获窗口的大小

$(function () {
    var originalHeight = $(window).height();
    $(window).resize(function (e) {
        var newHeight = $(window).height();
        var percentageChange = newHeight / originalHeight;
        $('body').html('old: ' + originalHeight + ' | new: ' + newHeight);
        originalHeight = newHeight;
    });
});

由于某种原因，这两个数字（原始高度和新高度）总是匹配的。我是否可以模拟另外两个事件，例如

beginResize

或

endResize

？如果我能做到，那么我就能做到：

$(function () {
    var originalHeight;
    $(window).beginResize(function () {
        originalHeight = $(window).height();
    });
    $(window).endResize(function () {
        var newHeight = $(window).height();
        var percentageChange = newHeight / originalHeight;
        alert(percentageChange);
});

有什么想法吗

更新：我能够在一个空白的环境中本地复制它，但不能在JSFIDLE上复制。我只能得出结论，JSFIDLE上的iframe环境正在干扰

当我执行以下页面时：

<!DOCTYPE html>

<html>
<head>
    <title>Isolate</title>
    <script type="text/javascript" src="~/Scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            var originalHeight = $(window).height();
            $(window).resize(function (e) {
                var newHeight = $(window).height();
                var percentageChange = newHeight / originalHeight;
                $('body').append('old: ' + originalHeight + ' | new: ' + newHeight + ' | percentage: ' + percentageChange + '<br />');
                originalHeight = newHeight;
            });
        });
    </script>
</head>
<body>
</body>
</html>

似乎每次调整大小都会运行两次调整大小事件。第一次检测到原始高度和新高度之间的差异，但第二次检测到的值相同，因为第一次运行会将原始高度更新为新高度

您可以看到，此双事件运行问题不会发生。每个条目显示的新旧值不同。

此行为完全是特定于浏览器的。它既不出现在Opera、Firefox也不出现在IE中，而是出现在Chrome中

为了避免这种行为，您只需检查上次更新是否在某个时间间隔内发生（例如，最近100毫秒）（，在所有常见浏览器中测试）：

$（函数（）{
var originalHeight=$（window.height（）；
var originalHeightTime=新日期（）；
$（窗口）。调整大小（函数（e）{
var newTime=新日期（）；
if（新时间-原始高度时间<100）
返回；
var newHeight=$（window.height（）；
var percentageChange=新高度/原始高度；
$（'body'）.html（'old:'+originalHeight+'| new:'+newHeight+'| percentage:'+percentageChange）；
原始高度=新高度；
原始高度时间=新时间；
});
});

我在这里的新高度发生了变化：。嗯，你说得对。我将尝试隔离特定于我的应用程序的任何变量。好吧，我在本地机器上启动了一个空白页，我可以使用与您的小提琴相同的代码复制此问题。请看我的更新。是的，肯定是因为JSFIDLE上的iframe。如果直接转到，可以看到值是相同的。无法重现此行为，在Win7x64上运行FF 13.0.1（32位）（新高度与旧高度不同）。但显然，在Windows中最大化窗口首先会移动窗口，然后调整窗口大小，然后触发再次调整大小，因为UI元素的位置已更改。有趣。在阅读您的答案之前，我提出了一个几乎相同的解决方案，只是我使用setTimeout实现了相同的效果。

old: 417 | new: 418 | percentage: 1.0023980815347722
old: 418 | new: 418 | percentage: 1
old: 418 | new: 419 | percentage: 1.0023923444976077
old: 419 | new: 419 | percentage: 1
old: 419 | new: 420 | percentage: 1.0023866348448687
old: 420 | new: 420 | percentage: 1
old: 420 | new: 422 | percentage: 1.0047619047619047
old: 422 | new: 422 | percentage: 1
old: 422 | new: 423 | percentage: 1.0023696682464456
old: 423 | new: 423 | percentage: 1

$(function () {
    var originalHeight = $(window).height();
    var originalHeightTime = new Date();
    $(window).resize(function (e) {
        var newTime = new Date();
        if (newTime - originalHeightTime < 100)
            return;
        var newHeight = $(window).height();
        var percentageChange = newHeight / originalHeight;
        $('body').html('old: ' + originalHeight + ' | new: ' + newHeight + ' | percentage: ' + percentageChange);
        originalHeight = newHeight;
        originalHeightTime = newTime;
    });
});