javascript - 无法从函数内部删除 eventListener

Question

我调用一个函数，其中包含“if/else”语句，该函数根据作为参数传递的 bool 值添加或删除监听器。
我的问题是我无法通过调用相同的函数来删除先前添加的监听器
我缺少什么？

function listenerTest(handler) {
    if(handler) {
        window.addEventListener("click", clickFn);
    }
    else {
        window.removeEventListener("click", clickFn);
    }

    function clickFn(event) {
        console.log(event)
    }
}        

listenerTest(true);  

window.setTimeout(listenerTest, 5000, false);  
   // call the "listenerTest" function 5 seconds later with "false" argument does NOT remove the listener 

我已经进行了多次测试，有趣的是，这是有效的

function listenerTest(handler) {
    if(handler) {
        window.addEventListener("click", clickFn);      // listener added
        window.removeEventListener("click", clickFn);   // and removed right after in the same block scope
    }

    function clickFn(event) {
        console.log(event)
    }
}        

listenerTest(true); 

Answer 1

删除clickFn并将其放在listenerTest的范围之外。每次调用该函数时都会创建一个新实例，因为 clickFn 被提升到listenerTest函数的顶部。

function clickFn(event) {
  console.log(event)
}

function listenerTest(handler) {
    if(handler) {
        window.addEventListener("click", clickFn);
    }
    else {
        window.removeEventListener("click", clickFn);
    }
}        

listenerTest(true);  

window.setTimeout(listenerTest, 5000, false);