使用jQuery UI可調整大小的工具時，檢查寬度的更有效方法是什么？

Question

我正在制作一個帶有可調整大小的側邊欄的網站。 當用戶調整邊欄的大小時，我希望邊欄中的圖標和文本與邊欄一起縮小。 當前，我正在使用if語句來檢查邊欄的寬度是否小於一定大小，但是當我在Mac的活動監視器上查看時，當我不斷調整邊欄的大小時，它表明Chrome中存在很多壓力。 我的解決方案有效，但是我想知道是否有更有效的方法可以解決此問題。 這就是我正在使用的：

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");
            }
        }
    });
});

小提琴： https : //jsfiddle.net/mpjb19m7/

在Fiddle中，它沒有顯示太多的CPU使用率，因為沒有調整圖像大小，但是您仍然可以看到，瀏覽器的壓力比平常大得多。 這僅僅是jQuery UI的方式還是我的工作效率低下？

Answer 1

如果您檢查Resizable Widget API ，則會注意到您不僅可以為resize事件綁定回調（我猜這是您注意到的壓力的根源，因為它將持續觸發），還可以為start和stop事件綁定回調。

我想如果您需要側邊欄UI僅在調整大小操作的開始/結束時進行響應，則偵聽這些事件可以解決您的問題。