JS如何检查回调是否存在？

Question

我有一系列已注册的回调

this.events[eventName].push({callback: callback});

问题在于，与数组中的用户操作相比，可以添加相同的calback，这已经存在。

如何检查回调是否存在？

如果从两个代码位注册两个相同的回调，将会发生什么？ 它们应该被执行是合乎逻辑的。 问题是，如何不从同一个地方重新注册回叫。

Answer 1

适合这种情况的数据结构是ES6 Map 。 如果您使用它而不是数组，它将自动只存储唯一的：

this.events = new Map(); // one time initialisation instead of `this.events = []`;
// ...
this.events[eventName].set(callback, {callback: callback});

并按如下方式执行事件的回调：

this.events[eventName].forEach(({callback}) => callback());

如果回调是您存储的唯一内容，那么您可以使用Set代替：

this.events = new Set();
// ...
this.events[eventName].add(callback);

并按如下方式执行事件的回调：

this.events[eventName].forEach(callback => callback());

Answer 2

您可以使用Array.prototype.some()来测试回调是否已存在：

if (!this.events[eventName].some(function(el) {
    return el.callback == callback;
}) {
    this.events[eventName].push({callback: callback});
}

Answer 3

用一个简单的循环？

for (var i = 0; i < this.events[eventName].length; i++)
  if (this.events[eventName].callback === callback)
    return;    // already exists, so return without pushing

this.events[eventName].push({callback: callback});

Answer 4

您可以使用Array.prototype.some函数来检查是否存在回调

 class Observer { constructor(){ this.events = {}; } on(name, callback){ if(typeof name !== 'string' || typeof callback !== 'function') return this; let ary = this.events[name] || (this.events[name] = []); if(ary.some(obj => obj.callback === callback)) return this; ary.push({callback}); return this; } } let observer = new Observer(); function testHandler(){} observer.on('test', testHandler) .on('test', testHandler); console.log(observer.events);