내 Scroll 이벤트가 여기에서 두 번 호출되는 이유는 무엇입니까?

Question

InfiniteScrollFactory : 나는 한 번 마우스를 아래로 스크롤 할 때

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

그런 다음, 적절한 시간 (또는 시간)에 다시 거짓 부울 변화가 다시 전화를 할 수 있도록 (백업 스크롤, 더 많은 항목은 reachedBottom()는 등, 한 번 거짓의 결과로,로드).