为什么这个简单的基于数组的事件发射器顺序敏感

Question

如果事件处理程序前面有".once"事件处理程序，则不会触发事件处理程序。不明白为什么会这样。

const emitter = (host = {}, listeners = {}) => Object.assign(host, {
  emit (event, data) {
    (listeners[event] || []).forEach(h => h(data))
  },
  on (event, handler) {
    if (!listeners[event]) listeners[event] = []
    listeners[event].push(handler)
    return () => host.off(event, handler)
  },
  once (event, handler) {
    if (!listeners[event]) listeners[event] = []
    listeners[event].push(function h () {
      handler(...arguments)
      host.off(event, h)
    })
  },
  off (event, handler) {
    const i = (listeners[event] || []).findIndex(h => h === handler)
    if (i > -1) {
      listeners[event].splice(i, 1)
      if (!listeners[event].length) delete listeners[event]
    }
  }
})
// EXAMPLE
const e = emitter()
e.once('msg', msg => {
    console.log('once.msg: ', msg)
})
e.on('msg', msg => { // <- not firing
    console.log('on.msg: ', msg)
})
e.on('msg', msg => {
    console.log('on_1.msg: ', msg)
})
e.emit('msg' ,'See me?')

第一个"on.msg"处理程序根本不会触发，但是如果将"once.msg"处理程序移动到其他两个处理程序下方，则一切都会顺利触发，为什么会这样？

Answer 1

这是因为(listeners[event] || []).forEach(h => h(data))将使用从 0 开始并为每个项目递增的索引器。当您删除一个项目时(调用once调用off时(，索引是错误的，实际上会跳过下一行。

解决此问题

的最简单方法是复制事件：

(listeners[event] || []).slice().forEach(h => h(data));