Question

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

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

现在，我不确定哪个事件将首先触发，并且可能非常不一致（取决于他们等待的HTTP请求），所以我永远无法安全地只听其中一个。所以，我需要以某种方式＆＃34;交叉倾听＆＃34;所有这些都是为了触发我原来的回调。

所以我的想法是做以下事情：

为A创建一个侦听器，为B创建一个侦听器.B＆＃39的侦听器触发回调。
为B创建一个侦听器，为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个我想要的事件时，怎么样？＃34; cross-listen＆＃34;至？假设我们有['A', 'B', 'C', 'D']。这显然需要循环事件。这部分令我感到困惑，我不确定如何继续。这需要注册一个很好的事件组合。

这需要在JavaScript中完成。

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

Answer 1

我在想这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

有很多方法可以做你要求的事情，但为了保持简单，你可以拥有一系列事件名称，就像你已经做的那样，只需删除它们，检查到看每次数组是否为空。像这样......

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

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

var eventOccured = function(eventName) {
    // if the event name is in the array, remove it...
    var idx = events.indexOf(eventName);
    if (idx !== -1) {
        events.splice(events.indexOf(idx), 1);
    }

    // if the event array is empty then we've handled everything...
    calback();
};

Event.on('A', function () {
    // do whatever you need in the event handler
    eventOccured("A");
});

Event.on('B', function () {
    // do whatever you need in the event handler
    eventOccured("B");
});

交叉侦听多个事件并触发回调

2 个答案: