2016-07-20 35 views
0

Ich habe eine Funktion, die auf Scrollen lauscht, aber ich muss es mehrmals aufrufen. Und dies verursacht Ereignis-Listener stapeln. Also habe ich versucht, eine zu entfernen, bevor das Hinzufügen, wie folgt aus:EventListener kann nicht entfernt werden

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

Ich habe auch versucht throttle Funktion auf andere variable Bindung:

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

Aber wenn ich Ereignis-Listener Tab in Chrome überprüfen, ich habe zwei (und mehr) Scroll-Listener hier initialisiert. Was soll ich machen?

+0

Sie versuchen, eine andere Funktion als die, entfernen Sie hinzugefügt ... damit es nicht entfernt wird. –

+0

['removeEventListener'] (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) benötigt die ursprüngliche Funktionsreferenz, die mit' addEventListener' verwendet wurde, also wenn 'drosseln' isn 't zurück, dass dann werden sie nicht entfernt –

+0

@PatrickEvans Drossel ist ein bekannter Funktion Dekorator, der verhindert, dass ein Event-Handler zu oft feuern, ist es in den meisten großen js-Bibliotheken wie Unterstreichung. Und Ihre Diagnose ist genau, sie gibt ein neues Funktionsobjekt zurück. –

Antwort

0

Sie Ihre Funktionsreferenz jedes Mal neu erstellt watchButton genannt wird, so fetcher und throttle(fetcher,...) gehen, anders sein jedes Mal watchButton genannt wird.

const nicht Ihren Variablen konstant über mehrere Anrufe watchButton

machen

Ihre const Variablen außerhalb der watchButton Funktion Verschieben

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