javascript - 交叉监听多个事件并触发回调

Question

我有一个需要监听的事件名称列表，存储在数组中，如下所示:

var events = ['A', 'B'];

现在，我不确定哪个事件将首先被触发，并且它可能非常不一致(取决于它们等待的 HTTP 请求)，因此我永远无法安全地只监听其中一个。因此，我需要以某种方式“交叉监听”所有这些，才能触发我原来的回调。

所以我的想法是执行以下操作:

1. 为 A 创建一个监听器，这会为 B 创建一个监听器。B 的监听器会触发回调。
2. 为 B 创建一个监听器，B 又为 A 创建一个监听器。A 的监听器会触发回调。

所以这会产生 4 个监听器，看起来像这样(伪代码):

var callback = function() { console.log('The callback'); };

Event.on('A', function () {
    Event.on('B', callback);
});

Event.on('B', function () {
    Event.on('A', callback);
});

所以我相信这会解决我的问题(不过可能还有另一个我在这里没有看到的问题)。

问题是，当我只需要监听 2 个事件时，我可以使这项工作正常进行。但是，当我有 3-4 个事件想要“交叉收听”时该怎么办？假设我们有['A', 'B', 'C', 'D']。这显然需要循环遍历事件。这部分让我感到困惑，我不知道如何继续。这需要注册一个很好的事件组合。

这需要在 JavaScript 中完成。

在这种情况下我的想象力和逻辑是有限的。

Answer 1

我在想这样的事情:

var callback = function() { console.log('The callback'); };
var events = {
  'click': false,
  'mouseover': false,
  'mouseout': false
};

for(prop in events) {
  $('.evt-button').on(prop, function(evt) {
    if(events[evt.type] === false) {
      console.log('First ' + evt.type + ' event');
      events[evt.type] = true;
      checkAll();
    }
  });
}

function checkAll() {
  var anyFalse = false;
  for(prop in events) {
    if(events.hasOwnProperty(prop)) {
      if(events[prop] === false) {
        anyFalse = true;
        break;
      }
    }
  }
  if(!anyFalse) {
    callback();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="evt-button">The button</button>