0

私はJSの問題を抱えており、リストの幅のliがmax-widthを超えたときに水平方向のulをチェックし、それらの要素のサイドパディングを減らしてすべてのliを適合させる必要があります。

問題は、liがulに追加されるすべてのコードを制御できないという理由だけで、liが追加されたときにイベントを発生させることができないことです。

したがって、私のオプションは、liの全幅のチェックを1秒間に数回ループすることでした。次のようになります。

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 に答える