JS：无法为我的 debounce function 删除 eventListener

Question

 let header = document.getElementById('header');

function logTitle() {
    console.log("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));

Tested this and works as expected. Then when I try to remove it is when I have trouble:

header.removeEventListener('click', debounceFunc);

I also tried header.removeEventListener('click', debounceFunc, true) and header.removeEventListener('click', debounceFunc, false); but neither are removing it.

Any ideas what I am doing wrong?

EDIT: I also tried originally creating the debounce without setting it to a variable like this and just attached debounce to the clickEvent but that didn't work when removing either:

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

Answer 1

Your problem is trying to removeEventListener when listener is anonymous function. It's impossible. However, you can assign return value of debounceFunc to a variable, for example my_callback . After that, my_callback becomes a function. Then just pass my_callback to add/remove EventListener.

Just use this:

let header = document.getElementById('header');

function logTitle() {
    console.log("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);

And then remove with this function call:

header.removeEventListener('click', my_callback);

Answer 2

You should save handle for event listener and unbind event listener by handle. Like this:

 let header = document.getElementById('header'); function logTitle() { console.log("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>