Question

例如，我有一些 click 事件，当我触发任何选择器事件时，所有其他选择器事件都应禁用，直到当前事件结束执行。

我点击了选择器-a ，然后反复点击了选择器-b

document.querySelector('.selector-a').addEventListener('click', function() {
  setTimeOut(function() {
    console.log('event A');
  }, 500);
});

document.querySelector('.selector-b').addEventListener('click', function() {
  console.log('event B');
});

我的预期结果：

event A
event B
event B
event B
.....

但是实际结果是：

event B
event A
event B
event B
.....

我的一些朋友告诉我使用 callback（） ，但是我认为它不能与 addEventListener < / strong>。有人可以解释为什么我应该使用 callback（） 还是有其他方法可以解决这个问题？

祝大家有美好的一天：）

Answer 1

不能完全阻止实际的click事件，但是可以相对轻松地实现所需的逻辑-仅在运行异步操作时设置一个布尔标志，并且可以在每个侦听器上检查它，因此在重置该标志之前，可以忽略点击次数：

let somethingRunning = false;
document.querySelector('.selector-a').addEventListener('click', function() {
  if (somethingRunning) return;
  somethingRunning = true;
  setTimeOut(function() {
    console.log('event A');
    somethingRunning = false;
  }, 500);
});

document.querySelector('.selector-b').addEventListener('click', function() {
  if (somethingRunning) return;
  console.log('event B');
});

请注意，与.selector-b一样，完全同步的处理程序不需要重新分配somethingRunning，因为这样的处理程序将始终运行到最后，然后其他处理程序才能运行。

Answer 2

简而言之，这是不可能的，但是通过使用诸如flag之类的逻辑，我们可以假设您单击了“选择器a”并且正在进行某些操作，并且同时单击了“选择器b”，则可以避免按标志执行，但是如何确保在第一次执行结束时应该有一种机制来执行第二次单击操作

但是要避免在用户单击并执行某些操作时避免单击，请在页面上添加叠加层，以使用户无法访问任何可操作的UI部件。

Answer 3

无法获得预期结果的原因是javascript的工作方式。当您调用 setTimout `时，它将异步运行，因此传入setTimout的函数将进入浏览器，并在500毫秒后传递到队列，然后event loop将进行检查如果堆栈为空，则当堆栈为空时，它将开始从队列中执行代码。

但是要获得预期的结果，您可以使用标志来完成，如果使用标志（例如isWaiting），则.selector-b中的函数将被中断，直到{{1}中的函数为止}已执行。然后，它将使您能够从.selector-a运行函数。就像在这个comment上一样。

执行某个事件时是否可以禁用所有其他事件？

3 个答案: