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

Posted 2023-03-06

【中文标题】调整大小导致滞后的高度检查

【英文标题】：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 哈，是的，我只是被工作分心了，不确定我是否能回答这个问题。

【参考方案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");
        
    );