Question

我正在使用下面的jquery来检查并重置调整大小时div的高度。但是，使用以下代码时会出现可怕的冻结/延迟。结构只是三个绝对定位的div。一个在顶部，一个在底部，一个在中间。知道为什么会这样吗？

$(window).resize(function () {
            if ($("#master_bodywrapper_div").height() < 500) {
                $("#master_bodywrapper_div").height(500);
            }
            else {
                $("#master_bodywrapper_div").height("auto");
            }
        });

Answer 1

这是因为，在某些浏览器上， resize事件每秒会触发数十次。只有在调整窗口大小后，才应该有一个名为的调整大小功能， 喜欢这样：

(function($) {
    var resizeTimer = false;

    function doResize() {
        if ($("#master_bodywrapper_div").height() < 500) {
            $("#master_bodywrapper_div").height(500);
        }
        else {
            $("#master_bodywrapper_div").height("auto");
        }
        resizeTimer = false;
    }

    $(window).on("resize", function() {
        if (resizeTimer) {
            clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(doResize, 300);
    });
})(jQuery);

希望这有帮助！

Answer 2

嗯，每次触发resize并且调用此函数时，它都会查询两次DOM，这可能是源（DOM查询可能很昂贵）。请注意，即使您只是抓住边缘并将鼠标（速度适中）移动到一侧，resize也会被触发很多。尝试将$("#master_bodywrapper_div")查询移动到调整大小回调之上，缓存在var中，然后在回调函数中使用该var引用。

var div = $("#master_bodywrapper_div");

$(window).resize(function () {
        if (div.height() < 500) {
            div.height(500);
        }
        else {
            div.height("auto");
        }
    });

高度检查调整大小导致滞后

2 个答案: