0

我有一个 JS 问题，我必须检查水平 ul 以了解该列表宽度的 li 何时超过最大宽度，然后减少这些元素的侧边距以使所有 li 适合。

问题是添加 li 时我无法触发事件，仅仅是因为我无法控制将 li 添加到 ul 的所有代码。

所以我的选择是每秒循环检查 li 的总宽度几次，如下所示：

function UpdateNavBar(initialX) { 
        var w = 0;
        var maxW = 100;
        var visibleLis = $(".navigationbar ul li.menuitem");
        $.each(visibleLis, function (i, e) {
            return w += $(e).width();
        });
        if (w >= maxW) {
            --xPadding;
            $(".navigationbar ul li.menuitem a").css({ "padding-left": xPadding, "padding-right": xPadding });

        }

        w = 0;
        setTimeout(UpdateNavBar, 100, initialX);
    }
    var xPadding = parseInt($(".navigationbar ul li.menuitem a").css("padding-left").replace("px", ""));
    UpdateNavBar(xPadding);​

我的问题是：还有其他明显的方法可以实现我所缺少的吗？像这样的功能将如何影响网站的性能，请记住它旨在在各种设备上运行？

非常感谢。

4

1 回答 1

1

em，由于您不知道何时添加 li，因此 settimeout 循环是一个不错的方法。

但你可以做一些优化。

settimeout 会为 ui 线程添加一个处理程序，因此如果处理程序完成执行的时间足够短，它将导致更好的性能。

所以，我的选择就像上面的代码，也许你可以做得更好

var listLength; 
function UpdateNavBar(initialX) { 
    var w = 0;
    var maxW = 100;
    var visibleLis = $(".navigationbar ul li.menuitem");
    //make a momorize and if no change happen, do nothing
    if(length === visibleLis.length){
        return false;
    }else{
        listLength = visibleLis.length;
    }
    $.each(visibleLis, function (i, e) {
        return w += $(e).width();
    });
    if (w >= maxW) {
        --xPadding;
        $(".navigationbar ul li.menuitem a").css({ "padding-left": xPadding, "padding-right": xPadding });

    }

    w = 0;
    setTimeout(UpdateNavBar, 100, initialX);
}
var xPadding = parseInt($(".navigationbar ul li.menuitem a").css("padding-left").replace("px", ""));
UpdateNavBar(xPadding);​
于 2012-09-10T08:24:17.487 回答