如何只运行一次函数，然后运行另一个依赖相同元素的函数答案

【问题标题】：How to run a function only once, then run another function that relies on the same elements如何只运行一次函数，然后运行另一个依赖相同元素的函数
【发布时间】：2012-05-02 06:09:44
【问题描述】：

我正在尝试为网站构建一个无限滚动系统，但遇到了问题。

基本上有一个包含大量<li> 元素的div。

此函数对 div 进行切片并隐藏前 20 个之后的每个 <li> 元素。一旦滚动到页面底部，它会显示所有并立即切片到 40，然后再次隐藏其余部分。

$("#CategoryContent li").slice(20).hide();    

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $("#CategoryContent li").show();
           $("#CategoryContent li").slice(40).hide();
       }
    });

我非常希望这种情况无限发生，直到所有内容都加载完毕。

添加具有不同切片编号的相同代码显然不起作用。那我该怎么做呢？

将第一个切片的值存储在一个变量中，一旦函数执行完毕，将该变量增加 20？

我已经搜索了插件来帮我解决这个问题，但它们都依赖于分页，而目前这不是一个选项。

【问题讨论】：

您需要保留一个将在.slice() 中使用的偏移值。

标签： javascript jquery infinite-scroll

【解决方案1】：

它很昂贵，但您可以获取可见元素的数量，然后将其添加 20。在调用$("#CategoryContent li").show() 之前，您可以这样做：

var visibleItems = $("#CategoryContent li").filter(function( i, el ) {
    return $(el).css("display") !== "none";
});

这将返回 $("#CategoryContent li") 集合中没有将 CSS display 属性设置为 none 的所有项目。

然后您可以将切片调用更新为：

$("#CategoryContent li").slice(visibleItems.length + 20).hide();

话虽如此，更好的方法是手动跟踪计数并在整个事物周围放置一个函数包装器。

(function ( ) {
    var visibleCount = 20;

    $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == $(document).height()) {
           visibleCount += 20;
           $("#CategoryContent li").show();
           $("#CategoryContent li").slice(visibleCount).hide();
       }
    });
}());

【讨论】：

【解决方案2】：

我最终这样做了

var mincount = 20;
var maxcount = 40;


$(window).scroll(function() 
                    {
                    if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
                            $("#CategoryContent li").slice(mincount,maxcount).fadeIn(800);

mincount = mincount+20;
maxcount = maxcount+20

}
});

【讨论】：

【解决方案3】：

我要做的第一件事就是缓存你的选择器。有道理，因为看起来您一直在使用它。

var category_content_lis = $('#CategoryContent li');

接下来，我可能不会为此烦恼.slice。我很可能只是使用:lt() 选择器之类的东西来微调我的选择器。

这个想法是隐藏所有内容，然后逐步显示它们。

category_content_lis
    .hide()
    .filter(':lt(20)')
    .show()
    ;

现在，如果您只是以 20 为增量显示它们，那么您可以执行以下操作来触发显示下一个 20：

category_content_lis
    .filter(':hidden:lt(20)')
    .show()
    ;

... 如果您愿意，可以方便地将其封装在一个函数中。无论您的列表有多长，这都会奏效。

请注意，我们并没有隐藏然后显示选择的所有内容。类似的东西会导致闪烁，这只是刺激性的，可能会也可能不会导致癫痫。

【讨论】：