2016-07-20 32 views
0

私はスクロールをリッスンする関数を持っていますが、何回か呼び出す必要があります。これにより、イベントリスナーがスタッキングされます。だから私はこのように、追加する前に1を削除しようとした:eventListenerを削除できません

watchButton() { 
    console.log('watching button'); 
    const button = document.getElementById('load-more-news'); 
    const fetcher =() => { 
     let windowHeight = document.body.offsetHeight/2; 
     let offset = button.getBoundingClientRect().top; 
     if (offset <= windowHeight) { 
     button.click(); 
     } 
    }; 

    window.removeEventListener('scroll', throttle(fetcher, CONFIG.THROTTLE), true); 
    window.addEventListener('scroll', throttle(fetcher, CONFIG.THROTTLE), true); 
    } 

私も他の変数にthrottle結合機能を試してみました:

const fetcher =() => { 
    let windowHeight = document.body.offsetHeight/2; 
    let offset = button.getBoundingClientRect().top; 
    if (offset <= windowHeight) { 
    button.click(); 
    } 
}; 

const boundFetcher = throttle(fetcher, CONFIG.THROTTLE); 

window.removeEventListener('scroll', boundFetcher, true); 
window.addEventListener('scroll', boundFetcher, true); 

しかし、私はChromeでイベントリスナーのタブを確認したときに、私は2つを持っています(スクロールリスナーはここで初期化されます。私は何をすべきか?あなたは毎回watchButtonが呼ばれ、あなたの関数の参照を再作成している

+0

外にごconst変数を移動

watchButton

に複数の呼び出し間であなたの変数を一定にしません...それは削除されません。 –

+0

[ 'removeEventListener'(https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)はaddEventListener''で使用された元の関数の参照を必要とするので、 'throttle' ISN場合それを返すと、それらは取り除かれません。 –

+0

@PatrickEvans throttleは、イベントハンドラがあまりにも頻繁に発砲するのを防ぐ有名な関数デコレータです。その大半のjsライブラリはアンダースコアのようです。そしてあなたの診断は正確で、新しい関数オブジェクトを返します。 –

答えて

0

、そうfetcherthrottle(fetcher,...)watchButtonが呼び出されるたびに異なることを行っています。

constあなたが追加したものとは異なる機能を削除しようとしているwatchButton機能

const button = document.getElementById('load-more-news'); 
const fetcher =() => { 
    let windowHeight = document.body.offsetHeight/2; 
    let offset = button.getBoundingClientRect().top; 
    if (offset <= windowHeight) { 
    button.click(); 
    } 
}; 
const throttledFetch = throttle(fetcher, CONFIG.THROTTLE); 

watchButton() { 
    window.removeEventListener('scroll', throttledFetch, true); 
    window.addEventListener('scroll', throttledFetch, true); 
} 
関連する問題