Question

我试图在用户到达网页中的某个点时触发滚动事件的操作。

所以我现在面临的是Scroll事件激发了太多次，这会混淆网页的结构。我的意思是太多的东西被突然加载到网站中，这正是我不想要的。相反，我在jQuery＆amp;中尝试过Debounce方法。也很节俭，但他们都没有工作，因为我告诉你。

DEBOUNCE 无法继续执行，直到用户停止滚动为止，如果用户持续滚动而没有延迟，那么debounce功能将无法执行。

THROTTLE 因为它在每个给定的时间后继续执行所以它可能会错过在那里开火的滚动位置。所以它也没有帮助。

我想要什么？

我希望每当用户滚动到网页的某个区域时，即使页面触发太多滚动事件，所以它应该只处理一个事件而忽略其余事件，然后当用户向下滚动然后他到达那么该区域又应该只处理一个请求。

IMP：此外，我也希望捕获快速滚动，因为现在只有当用户滚动太慢时，它才会在快速滚动时触发任何事件。即使在快速滚动期间，用户也会通过网页的某个区域，因此事件应该触发。

这是我的代码：

    $i = 0;
    $(window).scroll(_.throttle(function() {
     // console.log($i++);
        if ($('.searchResult').length) {
            scrollTop = $(this).scrollTop();
            lastLiPos = parseInt($('.searchResult li:last-child').offset().top) - parseInt($(window).height());
            last12thRowLiPos = parseInt($('.searchResult li:nth-last-child(26)').offset().top) - parseInt($(window).height());
            if ((scrollTop > last12thRowLiPos && scrollTop < (last12thRowLiPos) + 150) &&
                $('#search_result_cont').attr('data-disable-load-result') === 'false'
            ) {
                var text = $.trim($("div#load_more").text());
                if (text !== "No More Results") {
                        $('div#load_more').trigger('click');
                    }
                if (text !== "No More Results") {
                    $('div.loading_animate').fadeIn(1000);
                } else {
                    console.log($.trim($("div#load_more").text()));
                }
            }
        }
    },100));

Answer 1

我认为你需要一些RXJS 过滤器魔术..我没有使用它，但有一个rxjs-jquery库。

如何使滚动事件一次只接收一个请求？

1 个答案: