javascript - 使用 jQuery UI 可调整大小工具时，检查宽度的更有效方法是什么？

Question

我正在制作一个带有可调整侧边栏大小的网站。当用户调整这个侧边栏的大小时，我希望侧边栏中的图标和文本随着侧边栏一起缩小。目前我正在使用 if 语句来检查侧边栏的宽度是否低于特定大小，但是当我查看 Mac 的事件监视器时，它显示当我不断调整侧边栏的大小。我的解决方案有效，但我想知道是否有更有效的方法来解决这个问题。这就是我正在使用的:

HTML:

<div id = "home_left">
    <a href="#"><img src="images/image1.jpg" id = "profile_picture"/></a>
    <p id = "profile_username">username</p>
    <div class = "icon_container">
        <a href="#"><img src="images/image2.png" class = "profile_icons"/></a>
    </div>
    <div class = "icon_container">
        <a href="#"><img src="images/image3.png" class = "profile_icons"/></a>
    </div>
    <div class = "icon_container">
        <a href="#"><img src="images/image4.png" class = "profile_icons"/></a>
    </div>
</div>

jQuery:

$(document).ready(function(){
    // Setting the left sidebar as resizable
    $("#home_left").resizable({
        handles: "e",
        maxWidth: $("#home_left").width(),
        minWidth: 100,
        resize: function() {
            //Width of profile picture
            $("#profile_picture").width($("#home_left").width() - 24);

            //Appearance of username and icons
            if($("#home_left").width() < 200) {
                $("#profile_username").addClass("hidden");
                $(".icon_container").width($("#home_left").width());
            }
            else {
                $("#profile_username").removeClass("hidden");
            }
        }
    });
});

fiddle :https://jsfiddle.net/mpjb19m7/

在 Fiddle 中它没有显示太多的 CPU 使用率，因为没有图像被调整大小，但您仍然可以看到浏览器的压力比平时大得多。这就是 jQuery UI 的现状，还是我做的事情效率低下？

Answer 1

如果您检查 Resizable Widget API , 你会注意到你不仅可以为 resize 事件绑定(bind)回调(我猜这是你注意到的压力的来源，因为它会连续触发)而且可以为 start 和 stop 事件。

如果您需要侧边栏 UI 仅在调整大小操作的开始/结束时响应，我想监听这些事件可以解决您的问题。