2

我正在使用下面的 jquery 在调整大小时检查和重置 div 的高度。但是，使用以下代码时会出现可怕的冻结/滞后。该结构只是三个绝对定位的 div。一个在上面，一个在下面，一个在中间。知道为什么会发生这种情况吗？

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

2 回答 2

2

这是因为，在某些浏览器上，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);

希望这可以帮助！

于 2013-09-19T18:00:45.713 回答
1

好吧，它每次resize触发两次查询 DOM 并调用此函数，这可能是源（DOM 查询可能很昂贵）。请注意，resize即使您只是抓住边缘并将鼠标（以中等速度）移动到一侧 200 像素，也会触发很多。尝试将$("#master_bodywrapper_div")查询移动到 resize 回调上方，缓存在 var 中，然后在回调函数中使用该 var 引用。

var div = $("#master_bodywrapper_div");

$(window).resize(function () {
        if (div.height() < 500) {
            div.height(500);
        }
        else {
            div.height("auto");
        }
    });
于 2013-09-19T18:14:26.430 回答