为什么我的 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 个“滚动”。但是，它会被调用两次。即使我没有第 46 次滚动，我也第 46 次看到滚动。

socialMediaDirective：

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 等）。