JS: не могу удалить eventListener для моей функции устранения дребезга
let header = document.getElementById('header');
function logTitle() {
console.info("Logging Title")
}
let debounceFunc = function debounce(fn, delay) {
let newFn;
return function(...args) {
if (newFn) {
clearTimeout(newFn);
}
newFn = setTimeout(() => {
fn(...args)
},delay);
}
}
header.addEventListener('click', debounceFunc(logTitle, 3000));
Протестировал это и работает так, как ожидалось. Затем, когда я пытаюсь удалить его, у меня возникают проблемы:
header.removeEventListener('click', debounceFunc);
Я также пробовал header.removeEventListener('click', debounceFunc, true) и header.removeEventListener('click', debounceFunc, false);, но ни один из них не удаляется.
Любые идеи, что я делаю неправильно?
Обновлено: я также пытался изначально создать debounce, не устанавливая для него такую переменную, и просто привязал debounce к clickEvent, но это не сработало и при удалении:
// tried creating function like this as well:
function debounce(fn, delay) {
let newFn;
return function(...args) {
if (newFn) {
clearTimeout(newFn);
}
newFn = setTimeout(() => {
fn(...args)
},delay);
}
}
@FarazShaikh Я делаю все это в консоли браузера, поэтому я выполняю удаление прослушивателя событий, проверяя его, щелкнув элемент в DOM, и он не работает.
Я думаю, проблема в том, что debounceFunc при оценке addEventListner возвращает анонимную функцию, то есть функцию, которая добавляется в eventListener, а не debounceFunc. Вы должны сохранить ссылку на эту анонимную функцию, после чего вы сможете использовать эту ссылку в removeEvenrListner
@FarazShaikh, но это не debounceFunc в конечном счете функция, прикрепленная к eventListener, и ее удаление должно удалить все внутри, верно?
Нет, вы не передаете ссылку на debounceFunc, вы вызываете denounceFunc, который сначала оценивает его, а затем прикрепляет возвращенную из него функцию. Как только вы поставите () после имени функции, она станет вызовом функции.
@FarazShaikh ты был прав, спасибо
Приветствуются голоса :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ваша проблема заключается в попытке removeEventListener, когда слушатель является анонимной функцией. Это невозможно. Однако вы можете присвоить возвращаемое значение debounceFunc переменной, например my_callback. После этого my_callback становится функцией. Затем просто передайте my_callback, чтобы добавить/удалить EventListener.
Просто используйте это:
let header = document.getElementById('header');
function logTitle() {
console.info("Logging Title")
}
let debounceFunc = function debounce(fn, delay) {
let newFn;
return function(...args) {
if (newFn) {
clearTimeout(newFn);
}
newFn = setTimeout(() => {
fn(...args)
},delay);
}
}
let my_callback = debounceFunc(logTitle, 3000);
header.addEventListener('click', my_callback);
А затем удалить с помощью этого вызова функции:
header.removeEventListener('click', my_callback);
Ответ не содержит объяснений (я не против)
@Vlad let debounceFunc = function debounce(fn, delay) { } по-прежнему считается анонимной функцией, хотя функция названа?
@LegoGeo нет, анонимная функция - это безымянная функция. В вашем коде это объявлено в строке return function(...args) {
Кстати, вы тоже можете использовать let debounceFunc = function (fn, delay) {, назначив анонимную функцию переменной debounceFunc
спасибо ... так что это хороший способ подумать об этом: у меня было так, когда он каждый раз вызывал новую функцию, поэтому нет никакого способа удалить это - решение состоит в том, чтобы сохранить его в переменной, поэтому что это может быть удалено/сослано на более позднюю дату?
@LegoGeo Единственная разница между вашим старым кодом и этим кодом заключается в сохранении возвращаемого значения debounceFunc. Таким образом, функция не генерировалась каждый раз, вы просто не могли получить доступ к такой функции
это просто заставило меня щелкнуть в моей голове, большое спасибо
Вы должны сохранить дескриптор для прослушивателя событий и отвязать прослушиватель событий по дескриптору. Так:
let header = document.getElementById('header');
function logTitle() {
console.info("Logging Title")
}
let debounceFunc = function debounce(fn, delay) {
let newFn;
return function(...args) {
if (newFn) {
clearTimeout(newFn);
}
newFn = setTimeout(() => {
fn(...args)
},delay);
}
}
const eventHandler = debounceFunc(logTitle, 300);
header.addEventListener('click', eventHandler);
document.querySelector('button').addEventListener('click', () => {
header.removeEventListener('click', eventHandler);
})<header id = "header">
I'm header, click me to debounce function
</header>
<button>
Click me to unbind event handler for header
</button>это работает, спасибо, но теперь я в замешательстве, почему ... почему это работает, когда я устанавливаю переменную как debounceFunc ( const eventHandler = debounceFunc(logTitle, 300); ) вот так?
Где выполняется удаление прослушивателя событий?