0

基本上，我得到了一个无限循环，也许我工作太努力了，但我不明白为什么。

语境：

我正在使用旋转木马（Bootstrap）。轮播的内容被生成并推送到一张轮播幻灯片5中，然后目标是如果里面的项目数量超过某个预定义的最大长度属性（ ），则将内容分成多张幻灯片。对于轮播的特定用例（如果表格行超过 5 行，表格将分布在多张幻灯片上），我得到了这个工作正常，但它不够通用。发生的事情是 JS 将采用溢出的表格行（即索引 5 及以上），从函数中的硬编码 HTML 字符串创建一个新幻灯片（一个幻灯片div，其中包含表格的所有标记但为空）并推送那些额外的行。

为了使其更通用，我决定使用类似carousel_common_listand的类，在我解释过的情况下，carousel_common_item这些类将应用于tbodyand s。tr然后，我必须以解耦的方式处理模板。我试图做的是，克隆原始的唯一幻灯片，清空carousel_common_list并将任何溢出carousel_common_item的 s 推入其中，依此类推。但我得到一个无限循环。

代码

到目前为止，我所说的幻灯片被称为代码中的一个项目（以匹配 Bootstrap 的轮播item类幻灯片）。

var carousels = $('div.carousel'),
    carouselCommonListClass = 'carousel_common_list',
    carouselCommonItemClass = 'carousel_common_item',
    items_per_slide = 5;

$.each(carousels, function (index, element) {//for each carousel

    var $carousel = carousels.eq(index),
        $items = $carousel.find('.item');

    var getItemTemplate = function ($item) {
        $copy = $item.clone();//take the html, create a new element from it (not added to DOM)
        $copy.find('.' + carouselCommonListClass).empty();
        $copy.removeClass('active');
        return $copy;
    }


    var splitUpItem = function ($item, $itemTemplate) {
        var $bigList = $item.find('.' + carouselCommonListClass), group;
        while ((group = $bigList.find('.' + carouselCommonItemClass + ':gt(' + (items_per_slide - 1 ) + ')').remove()).length) {
            var $newItem = $itemTemplate;
            $newItem.find('.' + carouselCommonListClass).prepend(group);
            $newItem.insertAfter($item);
            splitUpItem($newItem, $itemTemplate);//infintely called
        }
    }

    //foreach item
    $.each($items, function (item_index, item_element) {//for each slide, in each carousel

        var $item = $items.eq(item_index);

        splitUpItem($item, getItemTemplate($item));
    });
});

//infintely called仅供参考，当标记为的行被注释掉时，这就像预期的那样工作；即将一张超大的幻灯片分成一张items_per_slide长度的幻灯片和另一张幻灯片（items_per_slide如果原来的唯一幻灯片长度过长，则长度可能会items_per_slide * 2过长。

另外，我接受了这个答案并将其修改为splitUpItem().

笔记：

我知道这不是像我一样在多张幻灯片上拆分表格、列表等的最有用或最容易访问的解决方案，但如果你有更好的主意，请回答我的未决问题。

4

1 回答 1

0

您本身并没有无限循环，因为您不会无限陷入同一个while循环。正如您所提到的，当您删除该//infinitely called行时，您就可以了。第一次通过该 while 循环，您计算的长度将等于gt:(4)$item 中所有列表中的项目数（带有 ）。然后删除所有这些项目，因此下一次通过将具有等于 0 的数字。这将始终是该循环的行为，因此它确实不需要是循环，但这不是主要问题。

问题是它是一个递归调用。而你唯一能防止递归调用无限的就是你的while循环中的条件，但这个条件总是会在第一次通过时得到满足。事实上，如果 $item 有 5 个列表，每个列表有 3 个项目gt:(4)，那么 $newItem 将有 5 个列表，每个列表有 5 x 3 = 15 个项目。因此，当splitUpItem在 $newItem 上调用时，您的 while 循环中的条件将首先再次为非零。然后它会再次被调用，这个数字将是 5 x 15 = 75。依此类推。换句话说，你递归地调用这个函数，并且你要防止这个调用被无限多次调用是检查某个数字是否为 0，但是随着每次递归调用，那里的数字实际上会呈指数增长splitUpItem。

希望这能回答您关于为什么它“无限循环”的问题。得开始工作了，但如果到那时还没有其他人的话，我明天会尝试提出一种更好的方法来拆分幻灯片。

于 2012-09-28T14:50:23.023 回答