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 и использовать его в обоих местах

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

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

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

Answer 2

Для removeEventListener вы должны пройти ту же ссылку, чтобы функционировать как вы передаете addEventListener., .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