0

我有许多包含 jquery 的函数，应该按顺序执行。它们不用于创建效果，而是用于将某些元素定位在 div 内的计算位置。jquery queue 上的所有在线资源都专注于创建过渡或动画，因此很难找到一个简单的示例来说明如何按顺序执行许多简单的函数。

我有这些功能：

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() 函数。

4

0 回答 0