Question

我有循环并动态附加到#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）更糟糕吗？你怎么知道的？如何设置定时器来测试每个方法的秒数（绑定'click'事件）？

Answer 1

我更喜欢并建议你更喜欢第二个...它更干净，可读并且不会一次又一次地创建点击处理程序，这根本不需要（因此委托on被引入更高版本的jquery，与效率完全相同的事情）....虽然我怀疑你的（2）脚本工作:) ..因为你必须将click事件委托给最接近的静态父级动态创建的元素，其中你的情况是a ..

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

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

Answer 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声明为变量，而不是每次都查找它。

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

2 个答案: