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?
Sie versuchen, eine andere Funktion als die, entfernen Sie hinzugefügt ... damit es nicht entfernt wird. –
['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 –
@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. –