将一个函数绑定到每个对象比一次绑定一个函数更糟糕吗？答案

【问题标题】：Is it worse to bind one function to each object than one to all at once?将一个函数绑定到每个对象比一次绑定一个函数更糟糕吗？
【发布时间】：2013-07-13 17:51:35
【问题描述】：

我有循环并动态地将链接附加到#content。我写了两种方式。

(1)

$.each(array, function(key, value) {
    $('#content').append('<a href="#">text</a>');
    $('#content a:last').click(function(e) {
        $.ajax({ url: ...
             ...
        });
    });
});

(2)

$.each(array, function(key, value) {
    $('#content').append('<a href="#">text</a>');
});

$('#content a').click(function(e) {
    $.ajax({ url: ...
         ...
    });
});

问：使用（1）方式代替（2）会更糟吗？你怎么知道？如何设置计时器来测试每个方法执行多少秒（绑定“点击”事件）？

【问题讨论】：

你为什么不亲自看看并在 jsPerf.com 上运行一些测试？
理论上，第一种方法可以避免将它们全部循环两次，但是仍然可以减少到一行而不是两行，避免额外调用 queryselectorall。
我认为click 将事件附加到#content 下的所有锚标签；你可以使用on 来使用委托
您不妨运行$('#content').click( ... ) 并检查函数中的a 标记以更快。
委托事件怎么样，这样您就不必在每个动态添加的链接上重新绑定它们？ $('#content').on('click', 'a', function(e) { ... })

标签： javascript jquery html performance append

【解决方案1】：

我更喜欢并建议您更喜欢第二个...它更干净，可读并且不会一次又一次地创建单击处理程序，这根本不需要（因此委托on在以后的版本中引入的 jquery，高效地做同样的事情）....虽然我怀疑你的 (2) 脚本是否正常工作:).. 因为你必须将点击事件委托给最接近的静态父级以获取动态创建的元素，在你的情况下是a..

$.each(array, function(key, value) {
  $('#content').append('<a href="#">text</a>');
});

$('#content').on('click','a',function(e) {
  $.ajax({ url: ...
     ...
  });
});

【讨论】：

虽然我同意委托是这里的首选方式（+1），但我认为他的意思是：“创建一堆元素，然后将相同的处理程序绑定到所有元素”（无意委托）
@JanDvorak .. hmmmmmm 没有 cmets.. :).. 希望这会有所帮助.. :)
是的，帮助 :j 我认为 .on('click') 和 .click 是相同的功能
@sirjay 他们不是。而$el.click(func) 只是$.el("click", func) 的别名，on 比这更丰富：它可以进行委托、绑定到任意事件以及一次调用绑定多个处理程序

【解决方案2】：

如果你有一个带有控制台的浏览器，那么设置计时器就很容易了，看看 Firefox（可能还有 Chrome）中的实现：https://developer.mozilla.org/en-US/docs/Web/API/console.time

例子：

console.time("append");
$.each(array, function(key, value) {
    $('#content').append('<a href="#">text</a>');
});
console.timeEnd("append");

console.time("click handler");

var myClickHandler = function(e) {
    $.ajax({ url: ...
         ...
    });
};

$('#content a').click(myClickHandler);
console.timeEnd("click handler");

我的猜测（仅此而已）是第二个稍微快一点，但从可感知的角度来看，几乎可以肯定差异可以忽略不计。请注意，我已删除匿名点击处理程序并将其定义为单个函数以保存多个实例（这将为您带来性能提升）

您可以进行更明显的性能改进。例如，将 $content 声明为变量，而不是每次都查找它。

【讨论】：

这仅涉及附加事件处理程序所需的时间。我认为第二种方式的最大好处是减少了附加到 DOM 的处理程序的总数，当点击事件实际发生时。
这是真的。至少，点击处理程序应该被重构为一个命名函数并通过名称而不是匿名传递。
console.time("append");效果很好！谢谢。 (2)方法快2-4倍