javascript - 在添加任何新事件监听器之前删除匿名事件监听器

Question

编辑:我需要调用一个函数来获取数据并重新加载页面的内容。但是，一旦另一个函数获取了数据(webSql)，就必须调用它。我无法使用 WebSql 回调，因为变量超出范围。因此，我创建了一个自定义事件，并在第二个函数作用域中添加了一个监听器。因此，当获取数据时，我将在第一个函数作用域中调度事件。现在的问题是，如果页面重新加载多次，监听器将被添加多次，并且所有监听器都将被调用，这是我不想要的。

我需要确保只有一个函数正在监听自定义事件。现在，一旦像这样调用监听器，就将其删除:

document.addEventListener("customEvent", function () {
  actualCallBack(var1, var2); // Since I need to pass parameters I need to use callBack within an anonymous function.
  this.removeEventListener("customEvent", arguments.callee, false);
}, false);

但问题是匿名函数只有在第一次调用后才会被删除。监听器有可能被多次添加。如何在添加新事件监听器之前删除事件监听器？

document.removeEventListener("customEvent");
document.addEventListener(...);

如果使用变量函数，我可以删除它，但我需要将一些参数传递给回调，因此我需要使用匿名函数。

Answer 1

使用菲利克斯的建议

var setSingletonEventListener = (function(element){
    var handlers = {};
    return function(evtName, func){
        handlers.hasOwnProperty(evtName) && element.removeEventListener(evtName, handlers[evtName]);
        if (func) {
            handlers[evtName] = func;
            element.addEventListener(evtName, func);
        } else {
            delete handlers[evtName];
        }
    };
})(document);

setSingletonEventListener("custom event", function(){

});

//replaces the previous
setSingletonEventListener("custom event", function(){

});

//removes the listener, if any
setSingletonEventListener("custom event");