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

How to run a function only once, then run another function that relies on the same elements

本文关键字：函数 运行 依赖于 另一个 元素 然后 一次 一个      更新时间：2023-09-26

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

基本上有一个包含大量<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？

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

它很贵，但你可以得到可见元素的数量，然后添加 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();
       }
    });
}());

我最终这样做了

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
}
});

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

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()
    ;

。如果您愿意，可以方便地封装在函数中。无论您的清单有多长，这都会起作用。

请注意，我们不会隐藏所有内容，然后显示选择。这样的东西会引起闪烁，这只是刺激性的，可能会或可能不会引起癫痫。

相关文章：