为什么在触发click（）事件时似乎有延迟？

Question

我有一个网格，每行设置一个Accept / Decline单选按钮。

单击单选按钮时，会调用ajax来检查是否需要禁用任何行，并刷新网格。

我有一些代码应该在单击一个时立即禁用所有单选按钮，这样用户在刷新之前就无法选择其他选项：

$('input').click(function(){
    $('input').prop('disabled', true);
});

但即使这个简单的代码在生效之前页面上的延迟约为500毫秒。其他时候几乎立即发生。

我无法控制可能正在运行的页面上的整体HTML /其他脚本，或者如果这是罪魁祸首导致其速度变慢。在设置事件监听器以更快地禁用单选按钮或阻止它们被单击时，我能做些什么吗？

Answer 1

修改

重读你的问题之后：

  

单击单选按钮时，会进行ajax调用以检查是否存在   需要禁用行，并刷新网格。

听起来这可能是罪魁祸首。是否有可能ajax请求是synchronous请求（async: false）并在您的点击处理程序之前触发？在您绑定自己之前，可能会有一个点击处理程序附加到这些单选按钮。第一个处理程序将首先执行，同步请求将阻止所有其他代码执行，直到它完成... AJAX请求可能需要大约500毫秒。

这也可以解释这种奇怪的行为：

  

但即使这个简单的代码在它之前的页面上也有~500ms的延迟   生效。其他时候几乎立即发生。

如果这是正在进行的，您需要在发出AJAX请求之前从该处理程序内部禁用单选按钮。

---

您的代码看起来不需要运行约500毫秒 - 即使页面上有一些疯狂的单选按钮。您可以更有效地编写相同代码的两种方法是：

• 缓存单选按钮：单击一个时，您的代码会在DOM中搜索所有单选按钮。您可以通过提前搜索单选按钮来加速单击处理程序的执行。
• 使用1个事件处理程序：在正文上使用1个委派事件处理程序，而不是在每个输入上设置单击处理程序。可能有大量的单选按钮并且每个单击处理程序绑定它们可能需要比预期更长的时间...但是它必须采用批次输入是罪魁祸首。

＆＃13;

＆＃13;

$(document).ready(function() {
  // cache radiobuttons
  var all_radiobuttons = $('input[type="radio"]');

  // This one handler on the body will handle clicks events for all input[type="radio"].
  $(document.body).on('click', 'input[type="radio"]', function() {
      all_radiobuttons.prop('disabled', true);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Test <input type="radio"></input></label>
<label>Test <input type="radio"></input></label>

＆＃13;

＆＃13;

＆＃13;