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

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

4 个答案: