javascript - Is it worse to bind one function to each object than one to all at once? -


i have loop , dynamically append links #content. wrote 2 ways.

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

q: worse use (1) way instead (2)? how know? how set timers test how many seconds every method goes (binding 'click' event)?

setting timers easy enough if have browser console, take @ implementation in firefox (and chrome too): https://developer.mozilla.org/en-us/docs/web/api/console.time

example:

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"); 

my guess (and that) second marginally faster, difference negligible in perceivable terms. note, have removed anonymous click handler , defined single function save multiple instances (which give performance gain)

there more obvious performance improvements make. example, declaring $content variable instead of looking every time.


Comments