3

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

(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）会更糟吗？你怎么知道的？如何设置计时器来测试每个方法执行多少秒（绑定“点击”事件）？

4

2 回答 2

2

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

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

$('#content').on('click','a',function(e) {
  $.ajax({ url: ...
     ...
  });
});
于 2013-07-15T18:57:22.610 回答
0

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

例子：

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

于 2013-07-15T18:42:43.427 回答