javascript - 为什么触发我的 click() 事件似乎有延迟？

Question

我有一个网格，每行都设置了接受/拒绝单选按钮。

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

我有一些代码，当单击一个单选按钮时，应立即禁用所有单选按钮，以便用户在刷新发生之前无法选择其他选项:

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

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

我对页面上可能正在运行或导致速度减慢的整个 HTML/其他脚本没有太多控制权(如果这是罪魁祸首)。我可以做些什么来设置事件监听器以更快地禁用单选按钮，或防止单击它们？

Answer 1

编辑:

重读您的问题后:

When a radio button is clicked, an ajax call is made to check if any of the rows need to be disabled, and the grid is refreshed.

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

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

but even this simple code has a lag of ~500ms on the page before it takes affect. Other times it happens almost immediately.

如果出现这种情况，您需要在发出 AJAX 请求之前禁用该处理程序内部的单选按钮。

<小时/>

即使页面上有大量单选按钮，您的代码看起来也不需要大约 500 毫秒才能运行。可以更有效地编写相同代码的两种方法是:

• 缓存单选按钮:当单击一个单选按钮时，您的代码会在 DOM 中搜索所有单选按钮。您可以通过提前搜索单选按钮来加快点击处理程序的执行速度。
• 使用 1 个事件处理程序:在正文上使用 1 个委托(delegate)事件处理程序，而不是在每个输入上设置一个点击处理程序。可能有大量的单选按钮，并且在每个单选按钮上绑定(bind)单击处理程序可能需要比预期更长的时间...但是，必须需要很多输入才能完成此操作成为罪魁祸首。

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

<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>