超时功能的性能

Perfomance of timeout functions

本文关键字：性能 功能 超时      更新时间：2023-09-26

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

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

所以我的选择是每秒循环检查李的总宽度几次，类似于这样：

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);​

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

非常感谢。

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);​
相关文章：