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

【问题标题】：Height check on resize causing lag调整大小导致滞后的高度检查
【发布时间】：2013-09-24 22:57:00
【问题描述】：

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

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

【问题讨论】：

嗯，每次触发resize 并调用此函数时，它正在查询 DOM 两次，这可能是源（DOM 查询可能很昂贵）。请注意resize 被触发很多即使您只是抓住边缘并将鼠标（以中等速度）移动到一侧200px。尝试将 $("#master_bodywrapper_div") 查询移动到 resize 回调上方，缓存在 var 中，然后在回调函数中使用该 var 引用。
@ajp15243 那是一个答案，不是吗？
@MilchePatern 哈，是的，我只是被工作分心了，不确定我是否能回答这个问题。

标签： javascript jquery resize height

【解决方案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);

希望这会有所帮助！

【讨论】：

【解决方案2】：

好吧，每次触发resize 并调用此函数时，它都会查询 DOM 两次，这可能是源（DOM 查询可能很昂贵）。请注意，即使您只是抓住边缘并将鼠标（以中等速度）移动到一侧 200 像素，resize 也会被触发很多。尝试将 $("#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");
        }
    });

【讨论】：