名前付き関数を持つwindow.removeEventListenerが機能しません

Question

私はReactを使用しています。以下は、無限スクロール機能を実装するために使用しているコードです。私が実際にしたいすべての項目たら、スクロールイベントをバインド解除

componentDidMount() { 
    // Flag to check if the content has loaded. 
    let flag = true; 

    function infiniteScroll() { 
     let enterpriseWrap = $('.enterprise-blocks'); 
     let contentHeight = enterpriseWrap.offsetHeight; 
     let yOffset = window.pageYOffset; 
     let y = yOffset + window.innerHeight; 

     console.log('hey'); 

     if(this.props.hasMore) { 

     if(y >= contentHeight && flag) { 
      flag = false; 

      this.props.loadMoreVendors(function() { 
      flag = true; 
      }); 

     } 

     } else { 
     window.removeEventListener('scroll', infiniteScroll.bind(this)); 
     } 
    } 

    window.addEventListener('scroll', infiniteScroll.bind(this)); 
    } 

がロードされているが、にremoveEventListenerが動作していません。私は何か間違っているのですか？

Answer 1

関数をバインドするたびに、新しい関数が返されます。最初に追加したものとは異なるリスナーを削除しています。 function.bindの結果を保存し、あなたがaddEventListenerに渡すとして機能するように、同一の参照を渡す必要がremoveEventListenerするには、両方の場所

this.boundInfiniteScroll = this.infiniteScroll.bind(this); 
... 

    } else { 
    window.removeEventListener('scroll', this.boundInfiniteScroll); 
    } 
} 

window.addEventListener('scroll', this.boundInfiniteScroll); 

Answer 2

にそれを使用。、.bind戻って新しい参照を、それは新しい関数であるため

bind（）メソッドは、呼び出されたときに、 このキーワードが指定された値に設定され、新しい関数が呼び出されたときに指定されたシーケンスよりも先に 引数が指定された新しい関数を作成します。

ので、あなたの例では、あなたはremoveEventListenerが

let flag = true; 
const infiniteScrollFn = infiniteScroll.bind(this); 

function infiniteScroll() { 
    let enterpriseWrap = $('.enterprise-blocks'); 
    let contentHeight = enterpriseWrap.offsetHeight; 
    let yOffset = window.pageYOffset; 
    let y = yOffset + window.innerHeight; 

    if (this.props.hasMore) { 
    if (y >= contentHeight && flag) { 
     flag = false; 

     this.props.loadMoreVendors(function() { 
     flag = true; 
     }); 
    } 
    } else { 
    window.removeEventListener('scroll', infiniteScrollFn); 
    } 
} 

window.addEventListener('scroll', infiniteScrollFn); 

Example