延迟触发错误的单击元素

Question

我有一个例子，其中名为both按钮both触发单击两个单独的元素（第一个和第二个按钮）。 在正常情况下，每个元素侦听器都被正确触发，但是当有任何类型的延迟（例如AJAX调用）添加到侦听器函数时，第二个元素会被触发两次，即使id有明确的触发器先打电话然后打电话。

在示例中单击了名为both按钮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秒后触发时，它会为每个按钮click事件打印两次id值。 此时， 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()函数具有相同的问题; 缺少变量的decarative语句。 这个例子修正了这一点

Answer 2

您覆盖您的ID，因为它由相同的函数调用更新。 您可以将它们保存在ID数组中或使用let 。

var ids = [];

$('#buttons').on('click', '.allow', function() {
  console.log('clicked', $(this));
  ids.push($(this).attr('id'));
  setTimeout(function() {
    console.log(ids);
  }, 1000);
});

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