CODEWITHSUNDEEP
javascriptjquery
snuuve
snuuve

Reputation: 315

Difference between $(function) with multi event vs multi $(function) with single event

Is it big difference and what difference between this codes?

$(function(){
$("#id1").click(function(){ //some codes}
$("#id2").click(function(){ //some codes}
$("#id3").click(function(){ //some codes}
});

vs

$(function(){ $("#id1").click(function(){ //some codes}});
$(function(){ $("#id1").click(function(){ //some codes}});
$(function(){ $("#id1").click(function(){ //some codes}});

I know its document.ready() but how this notation affect the speed of page?

Upvotes: 0

Views: 63

Answers (2)

Yang
Yang

Reputation: 8701

By default jquery will merge all $(function(){ ... }) calls into a singular one found in a document. When you have several DOM ready calls a.k.a $(function(){ ... }) you require jquery to perform extra work (which takes some time, and a bit of memory).

So you should better be always using on one DOM Ready handler, wrapping all your stuff there - for the better performance.

Upvotes: 1

TastySpaceApple
TastySpaceApple

Reputation: 3185

Multiple calls to document.ready could cause your code to run a bit slower, as the jspref shows: http://jsperf.com/abusing-jquery-document-ready.

But more so, it would damage readability. (When does the code begin? which functions are first run?). I'm all for a big all-in-one init() function.

Upvotes: 1

Related Questions