Scrollイベントが2回呼び出されているのはなぜですか？

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回のスクロールが必要です。しかしそれは2回呼び出されます。そして、私は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()が一度偽で、その結果、より多くのアイテムがロードされ、バックアップスクロール、など）。