2

ブラウザのサイズが変更された割合を計算しようとしていますが、サイズ変更が開始される前のウィンドウのサイズと、サイズ変更が終了した後のサイズをキャプチャできないようです。

$(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;
    });
});

2つの数値（originalHeightとnewHeight）は、何らかの理由で常に一致します。またはなどの2つの追加イベントをシミュレートするためにできることはありますbeginResizeかendResize？私がそれを行うことができれば、私はこれを行うことができます：

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

何か案は？

アップデート：

空白の環境でこれをローカルに複製することはできましたが、jsfiddleでは複製できませんでした。jsfiddleの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>

次の結果が得られます。

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

サイズ変更イベントは、サイズ変更ごとに2回実行されているようです。最初はoriginalとnew​​の違いを検出しますが、2回目は、最初の実行でoriginalHeightがnewHeightに更新されるため、値は同じです。

このフィドルで、このダブルイベント実行の問題が発生していないことがわかります。各エントリには、新旧の異なる値が表示されます。

4

1 に答える 1

3

この動作は完全にブラウザ固有です。これは、Opera、Firefox、IEのいずれでも発生しませんが、Chromeで発生します。

この動作を回避するために、最後の更新が特定の間隔（たとえば、最後の100ミリ秒）で発生したかどうかを簡単に確認できます（フィドル、すべての一般的なブラウザーでテスト済み）。

$(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;
    });
});
于 2012-07-11T22:37:00.217 に答える