延迟触发错误的单击元素

Question

I have an example where button named both exclusively triggers a click of two separate elements (first and second buttons). Under normal circumstances each of the element listeners is triggered correctly, but when there is any kind of delay (for example an AJAX call) added to the listener function, the second element is triggered twice, even though there is an explicit trigger by id to call first and then second.

In the example click button named both and see that only second button is triggered twice.

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

With your current logic id is declared globally, hence it's set to first then immediately updated to second when you trigger the click on the second button. When the timeout fires 2 seconds later it prints the value of id twice, once for each button click event. At that point the value of id is now set to second .

To fix this you can declare id within the scope of the .allow click handler function:

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

Note that the triggerBoth() function has the same problem; missing variable delcarative statements. The example fixed this.

Answer 2

You overwriting your id because its updated by the same function call. You could save them in an ids array or use 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');
}