Javascript 使用带有复选框的jQuery委托（on）会导致响应的巨大延迟-为什么？

嗨，我有一个动态创建的表，它使用复选框作为一个选择列表。我希望这些复选框相互排斥。因此，在选中一个复选框后，我需要清除任何其他复选框

$(document).on("keydown", "#list_Instructors input.allocate",function(event){   
    alert("hit");
    $("#list_Instructors input.allocate").removeAttr('checked');
    $(event.target).attr('checked', 'checked');
});

这种方式可以工作，但是在点击和任何不好的事情发生之间有一个巨大的延迟。我尝试过各种组合，但都没有成功

---

是否有一个简单的解释来解释为什么会产生延迟。

您可能看到的是，在解除警报框之前，之后的代码不会执行。警报命令是一个阻塞命令

---

也许您可以使用console.log调试此功能。这不会阻止您的代码，它将在按键按下事件中执行。

您可能会看到，在解除警报框之前，不会执行随后的代码。警报命令是一个阻塞命令

也许您可以使用console.log调试此功能。这不会阻塞您的代码，它将在keydown事件上执行。

您的问题是您为整个DOM绑定了一个非常糟糕的方法。 因此，请始终尝试将其绑定到控件所在的最近的div最近的父元素

第二件事是始终缓存选择器以获得更好的性能

var dataTable=$('#dataTable');

dataTable.on("click", function(event){
    alert($(this).text());
});

关于活动绩效，如下所示

在文档顶部附近附加许多委托事件处理程序 树可能会降低性能。每次事件发生时，jQuery都必须 将该类型的所有附加事件的所有选择器与 从事件目标到事件顶部的路径中的元素 文件为获得最佳性能，请在文档中附加委派事件 尽可能靠近目标元素的位置。避免过度 使用document或document.body处理大型服务器上的委托事件 文件

您的问题是您绑定了整个DOM的方法，这非常糟糕。 因此，请始终尝试将其绑定到控件所在的最近的div最近的父元素

第二件事是始终缓存选择器以获得更好的性能

var dataTable=$('#dataTable');

dataTable.on("click", function(event){
    alert($(this).text());
});

关于活动绩效，如下所示

在文档顶部附近附加许多委托事件处理程序 树可能会降低性能。每次事件发生时，jQuery都必须 将该类型的所有附加事件的所有选择器与 从事件目标到事件顶部的路径中的元素 文件为获得最佳性能，请在文档中附加委派事件 尽可能靠近目标元素的位置。避免过度 使用document或document.body处理大型服务器上的委托事件 文件

您需要使用$this，而不是进行另一次查找。同样如上所述，如果可能的话，尝试绑定到最近的父元素，例如容器div。这样做会使您的速度加快一点：

$(document).on('keydown', '#list_Instructors input.allocate', function (event) {   
    //alert("hit");
    console.log('hit');
    $(this).removeAttr('checked');
    $(event.target).attr('checked', 'checked');
});

但您应该尝试用容器div或其他父元素替换文档

您需要使用$this，而不是进行其他查找。同样如上所述，如果可能的话，尝试绑定到最近的父元素，例如容器div。这样做会使您的速度加快一点：

$(document).on('keydown', '#list_Instructors input.allocate', function (event) {   
    //alert("hit");
    console.log('hit');
    $(this).removeAttr('checked');
    $(event.target).attr('checked', 'checked');
});

---

但是您应该尝试用容器div或另一个父元素替换文档

延迟是什么时候？在按键和警报之间？您有多少input.allocates？如果您想拥有互斥性，通常使用单选按钮而不是复选框。顺便说一句，event.target通常不是委派的目标，请使用此或event.currentTargetinstead@codepuppy是的，但那只是偶然的。。例如，请参见延迟时间是什么时候？在按键和警报之间？您有多少input.allocates？如果您想拥有互斥性，通常使用单选按钮而不是复选框。顺便说一句，event.target通常不是委派的目标，请使用此或event.currentTargetinstead@codepuppy是的，但那只是偶然的。。例如，我试过这个。我再次知道它正在注册事件，因为控制台消息会出现，但只是在延迟之后。如果我将alt tab键从页面上移开，所有点击的内容都会进入控制台或显示警报。很奇怪，我试过了。我再次知道它正在注册事件，因为控制台消息会出现，但只是在延迟之后。如果我将alt tab键从页面上移开，所有点击的内容都会进入控制台或显示警报。这很奇怪。你是认真地告诉我，在文档上授权会导致任何可见的性能问题吗？也许如果他在documentOk上有英勇的嵌套级别或数千个不同的委托，那么缓存所有选择器将是一项艰巨的任务！但是，如果性能改进如您所说，那将非常有用。你是如何得出你的绩效数据的？@codepippy我从这里得到了这些数据

---

但这并不能解决问题。你、Steven、Lix和Esailija给了我哪些极好的建议？唯一的共同点是按下alt键会显示警报或控制台消息，并切换检查。我想不出这样做的原因。@Esailija我已经在事件性能下更新了我的帖子。请检查jquery api的说法。你是认真地告诉我，对文档的委托会导致任何可见的性能问题吗？也许如果他在documentOk上有英勇的嵌套级别或数千个不同的委托，那么缓存所有选择器将是一项艰巨的任务！但是，如果性能改进如您所说，那将非常有用。您是如何得出性能数据的？@codepuppy我从这里得到了这些数据，但这并不能解决问题。你、Steven、Lix和Esailija给了我哪些极好的建议？唯一的共同点是按下alt键会显示警报或控制台消息，并切换检查。我想不出这样做的原因。@Esailija我已经在“事件性能”下更新了我的帖子。请检查jquery api所说的内容。@codepuppy是否只想检查触发此事件的复选框以外的所有复选框？还有什么理由使用keydown？在我看来，我会使用键盘或按键。是的，我会。没有理由使用keydown。@codepuppy是否只希望选中触发此事件的复选框以外的所有复选框？还有什么理由使用keydown？在我看来，我会使用键盘或按键。是的，我会。没有理由使用keydown。