为什么我的 Scroll 事件在这里被调用了两次？

Question

无限滚动工厂:

const scrollingSocial = (e) => {
    console.log('scrollingSocial');
    // e.stopPropagation();
    const reachedBottom = () => socialCol.scrollHeight - socialCol.scrollTop === socialCol.offsetHeight;
    const loadMoreItems = () => {
        console.log('[ Fire Once ] loadMoreItems...');
        $rootScope.$emit("socialmedia.stream.load");
    };
    if (reachedBottom()) loadMoreItems();
};

const wireSocialScroll = (list) => {
    console.log('wireSocialScroll called!');
    if (notEmpty(list)) {
        socialCol.addEventListener('scroll', scrollingSocial);
    }
};

const attachScrollListener = (location, col, list) => {
    console.log('attachScrollListener');
    console.log(' location', location);
    switch (location) {
        // case 'tagsPanel'   : tagsCol   = col; wireTagsScroll(list);   break;
        // case 'feedPanel'   : feedCol   = col; wireFeedScroll(list);   break;
        case 'socialMedia' : socialCol = col; wireSocialScroll(list); break;
    }
};

我的 scrollingSocial 函数在我向下滚动一次鼠标时被调用一次。最终触发我的 loadMoreItems 功能大约需要 45 'scrolls'。然而，它被调用了两次。我第 46 次看到滚动，尽管我没有第 46 次滚动。

社交媒体指令：

const getColHeight = (tags) => {
    if (notEmpty(tags)) InfiniteScrollFactory.attachScrollListener('socialMedia', socialCol, tags);
};

Answer 1

滚动及其事件触发器可能有点挑剔。

只需使用此代码：

$(document).on('scroll', () => console.log('scroll'));

每次勾选鼠标滚轮时都会出现多个卷轴，无论我多么小心地这样做。

这可能与您所拥有的问题相同。您要做的只是添加一个布尔值来跟踪您是否调用了 loadMoreItems，使用该布尔值防止它再次调用它。

let loadingMoreItems = false;
const scrollingSocial = (e) => {
    console.log('scrollingSocial');
    // e.stopPropagation();
    const reachedBottom = () => socialCol.scrollHeight - socialCol.scrollTop === socialCol.offsetHeight;
    const loadMoreItems = () => {
        console.log('[ Fire Once ] loadMoreItems...');
        $rootScope.$emit("socialmedia.stream.load");
    };
    if (!loadingMoreItems && reachedBottom()) {
        loadingMoreItems = true;
        loadMoreItems();
    }
};

然后，在适当的时间（或多次）将该布尔值改回 false 以允许它再次调用（向上滚动，加载更多项目，reachedBottom() 一次导致 false，等等）。

为什么我的 Scroll 事件在这里被调用了两次？

Why is my Scroll event being called twice here?

javascript

event-listener

addeventlistener

dom-events

angularjs