延遲觸發錯誤的單擊元素

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