イベントリスナーは、私は窓に設定されたイベントリスナーを削除する必要が

Question

削除しませんが、それは動作しません。私はlodashのスロットルの有無に関わらずリスナーを設定しようとしましたが、何の違いもありません。ここに私のコードは次のとおりです。

setupListener() { 
    window.addEventListener('resize', _.throttle(this.handler.bind(this), 750)); 
    window.addEventListener('scroll', _.throttle(this.handler.bind(this), 750)); 
} 

removeListener() { 
    window.removeEventListener('resize', _.throttle(this.handler.bind(this), 750)); 
    window.removeEventListener('scroll', _.throttle(this.handler.bind(this), 750)); 
    window.addEventListener('load', this.handler.bind(this), false); 
} 

static isElementInViewport (el) { 
    let rect = el.getBoundingClientRect(); 
    return (
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
    ); 
} 

handler() { 
    if (this.options.url === undefined) {throw new Error('no url specified');} 
    if (InfiniteScroll.isElementInViewport(this.elementToWatch)) { 
     this.removeListener(); 
     this[this.options.transport](); 
    } 
} 

私も除去promisifyしようとしました：

handler() { 
    if (this.options.url === undefined) {throw new Error('no url specified');} 
    if (InfiniteScroll.isElementInViewport(this.elementToWatch)) { 
     Promise.resolve(this.removeListener()) 
      .then(val => { 
       this[this.options.transport](); 
      }); 
    } 
} 

いずれかの違いはありませんでした。

後のコードで、私は、リスナーを再割り当てしたい：

handleResponse(data) { 
     console.log('handleResponse' + data); 
     Promise.resolve(this.addElementsToDOM(data)) 
      .delay(1000) 
      .then(() => { 
       this.page++; 
       this.elementToWatch = document.getElementById(this.element).rows[document.getElementById(this.element).rows.length - this.options.loadTiming]; 
       //this.setupListener(); 
      }); 
    } 

私はすべてのステップを記録し、その理由を見つけることができませんしました。誰かが助けてくれますか？

追記：削除し、リスナーにすべての時間を追加するよりも、スクロールイベントを処理する良い方法はありますか？

Answer 1

事がある：あなたがイベントリスナーを追加するとき、ブラウザはその「キー」は、パラメータとして渡しているfunction参照として保存されます。したがって、削除する場合は、その参照を送信する必要があります。

あなたの問題を解決するには2つの方法があります。最初は名前の関数を作成することです：

setupListener() { 
    this.listener = function() { 
    _.throttle(this.handler.bind(this), 750); 
    }.bind(this); 

    window.addEventListener('resize', this.listener); 
    window.addEventListener('scroll', this.listener); 
} 

removeListener() { 
    window.removeEventListener('resize', this.listener); 
    window.removeEventListener('scroll', this.listener); 
    window.addEventListener('load', this.handler.bind(this), false); 
} 

他には、ウィンドウのaddEventListenerメソッドをオーバーライドすることであるが、私はあなたがそれを行うことをお勧めしません。