javascript - 延迟触发错误的元素点击

Question

我有一个示例，其中名为 both 的按钮专门触发点击两个单独的元素(第一个和第二个按钮)。在正常情况下，每个元素监听器都会被正确触发，但是当有任何类型的延迟(例如 AJAX 调用)添加到监听器函数时，第二个元素会被触发两次，即使有一个明确的 id 触发先调用再调用。

在示例中单击名为 both 的按钮，可以看到只有第二个按钮被触发了两次。

$('#buttons').on('click', '.allow', function() {
  id = $(this).attr('id');
  setTimeout(function() {
    console.log(id);
  }, 2000);
});

$('#both').on('click', function() {
  triggerBoth();
});

function triggerBoth() {
  first = $('#first');
  second = $('#second');

  first.addClass('allow');
  first.click();
  first.removeClass('allow');

  second.addClass('allow');
  second.click();
  second.removeClass('allow');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="buttons" style="display:inline-block;">
  <button id="first">FIRST</button>
  <button id="second">SECOND</button>
</div>
<button id="both">BOTH</button><br>
<div id="result"></div>

JSFIDDLE:https://jsfiddle.net/126zkugo/8/

Answer 1

根据您当前的逻辑，id 是全局声明的，因此它被设置为 first 然后当您触发点击时立即更新为 second第二个按钮。当超时在 2 秒后触发时，它会打印两次 id 的值，每个按钮 click 事件一次。此时 id 的值现在设置为 second。

要解决此问题，您可以在 .allow 点击处理函数的范围内声明 id:

$('#buttons').on('click', '.allow', function() {
  let id = $(this).attr('id'); // or var id, or const id...
  setTimeout(function() {
    console.log(id);
  }, 2000);
});

$('#both').on('click', function() {
  triggerBoth();
});

function triggerBoth() {
  let $first = $('#first');
  let $second = $('#second');

  $first.addClass('allow');
  $first.click();
  $first.removeClass('allow');

  $second.addClass('allow');
  $second.click();
  $second.removeClass('allow');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="buttons" style="display:inline-block;">
  <button id="first">FIRST</button>
  <button id="second">SECOND</button>
</div>
<button id="both">BOTH</button><br>
<div id="result"></div>

注意triggerBoth()函数也有同样的问题；缺少变量声明语句。该示例解决了这个问题。