window.removeEventListener mit einer benannten Funktion funktioniert nicht

Question

Ich verwende React und unten ist der Code, den ich verwende, um die unendliche Bildlauffunktion zu implementieren.

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

ich eigentlich will das Scroll-Ereignis entbinden, wenn alle Elemente geladen werden, aber removeEventListener funktioniert nicht. Mache ich etwas falsch?

Answer 1

Jedes Mal, wenn Sie eine Funktion binden, erhalten Sie eine neue Funktion zurück. Sie entfernen einen anderen Listener als den, den Sie ursprünglich hinzugefügt haben. Speichern Sie das Ergebnis von function.bind und verwenden, die in beiden Orten

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

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

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

Answer 2

Um removeEventListener Sie die gleichen Bezugs passieren müssen, um als Sie addEventListener passieren., .bind kehrt neue Referenz, weil es neue Funktion ist

Die bind() -Methode erstellt eine neue Funktion, deren dieses Schlüsselwort auf den angegebenen Wert gesetzt wird, wobei eine gegebene Folge von Argumenten vor allen beim Aufruf der neuen Funktion angegebenen steht.

so in Ihrem Beispiel haben Sie zwei unterschiedliche Referenz, deshalb removeEventListener nicht

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