javascript - jquery を含む単純な関数を jquery 実行キューに入れる

Question

順次実行する必要があるjqueryを含む関数がいくつかあります。これらは効果を作成するために使用されるのではなく、特定の要素を div 内の計算された位置に配置するために使用されます。jquery キューのすべてのオンライン リソースは、トランジションまたはアニメーションの作成に重点を置いているため、多数の単純な関数を順番に実行する方法に関する単純な例を見つけるのは困難です。

私はこれらの機能を持っています:

function bigItemRecalc(recalc, idBase, innerHeight, i) {
    if (recalc < 0) {
        $('#' + idBase + i).css('max-height', (innerHeight + (2 * recalc)));
        recalc = 0;
    }
    return recalc;
}

function firstCheck(recalc, idBase, i) {
    if (i == 1) {
        $('#' + idBase + i).css('margin-top', recalc * -1);
    }
}

function lastCheck(recalc, idBase, itemAmount, i) {
    if (i == itemAmount) {
        $('#' + idBase + i).css('margin-top', recalc);
    }
}

function truncateItems(totalHeight, widgetHeight, idBase, i) {
    if (totalHeight > (widgetHeight - 20)) {
        $('#' + idBase + i).remove();
        $('#' + idBase + "b" + i).remove();
    }
}

別の関数では、できればjqueryキューを使用してこれらを順次実行したいのですが、方法がわかりません。

コードはここで呼び出されます：

function styleWidget(itemAmount, widgetHeight, widgetWidth, idBase) {
    var innerHeight;
    var outerHeight;
    var recalc;
    var totalHeight = 0;
    var totalWidth = 0;

for (var i = 1; i <= itemAmount; i++)
    {
        if (widgetHeight >= widgetWidth)
        {
            totalHeight += $('#'+idBase+i).height();
            innerHeight = $('#' + idBase + i).height();
            outerHeight = (widgetHeight/itemAmount);
            recalc = ((outerHeight / 2) - (innerHeight / 2));
            recalc = bigItemRecalc(recalc, idBase, innerHeight, i);

                $('#' + idBase + i).css('padding-top', recalc);
                firstCheck(recalc, idBase, i);
                lastCheck(recalc, idBase, itemAmount, i);
                truncateItems(totalHeight, widgetHeight, idBase, i);



        }
        else
        {
            innerHeight = $('#'+idBase+i).height();
            outerHeight = widgetHeight;
            recalc = ((outerHeight/2)-(innerHeight/2));
            $('#'+idBase+i).css('padding-top',recalc);
            totalWidth += $('#'+idBase+i).width();
            if (totalWidth > (widgetWidth-20))
            {
                $('#' + idBase + i).remove();
                $('#' + idBase + "b" + i).remove();
            }

        }
    }

    }

下部はまだ更新されていませんが、ポートレート モードのウィジェットでテストされているため、無視できます。

手がかりを見つけたと思います。遅延が導入されていない場合、totalHeight と innerHeight の値は非常に低く見えます。そのため、スクリプトが実行されるまでにページが完全に読み込まれていないと想定しています。新しいウィジェットが生成されるたびに、上記のスクリプトは次のように呼び出されます。

$(document).ready(styleWidget(3, 225, 169, 'id-871206010'));

これで修正されました: Firefox 5 が document.ready を無視するのはなぜですか? ページをリロードしても .ready() 関数がトリガーされなかったようです。