Javascript call a function or inline code?

Question

I had a weird experience. On the success of the ajax call I did loads of computation and processing on the DOM, everything was as smooth as it can be. Next I moved the whole code written in the success to a separate javascript function which was in turn invoked on the success part of the ajax. Now I see a lag of 1-2 seconds in execution of the function. Is it possible that inline code is faster than a function call?

EDIT The sample code :

$.ajax({
 url: '/apps/project/controller/load_data',
 method: 'get',
 dataType: "json",
 data: {},
 success: function(data) {
 //Parse JSON (Huge Data) and insert into DOM
}});

The second approach I did

$.ajax({
 url: '/apps/project/controller/load_data',
 method: 'get',
 dataType: "json",
 data: {},
 success: function(data) {
 populate_timeline(data)
}});
function populate_timeline(json){
//Parse JSON (Huge Data) and insert into DOM
}

• casablanca: Calling a function shouldn't cause any visible performance lag. Can you post some sample code that exhibits your problem?
• JohnFx: Please include code samples or a link to jsFiddle or something so we can see the problem.
• phoenixwizard: I have included the skeletal of the code. Its simple JSON parsing and filling the data in the DOM
• Calvin: Does it make a difference if you just reference the function name instead of wrapping it in an anonymous function? e.g. success: populate_timeline
• casablanca: I can't see any reason why there would be a difference. How are you measuring the time lag? Is the difference consistent between runs?

Answer 1

One suggestion would be to not compound your problems by using an anonymous pass through. You should simply be able to do success: populate_timeline as functions are first order objects in JavaScript. You may have to ensure that populate_timeline is declared before it is referenced in the ajax, I don't know how all your code is laid out or called.

I was optimizing a script recently and found that in-lining a single function call really had very little effect on performance. That was code that performed some canvas animations with a pretty short setInterval time so the function call was being made many many times a second.

Have you gone back and made sure that moving the previously in-lined code to its own function is the only thing you've done? It's easy to make other changes without thinking about it. Also if you are running this code on your local machine for development purposes, ensure it's not simply the ajax call being slower rather than the function call. Maybe you have some other CPU heavy process running now that wasn't running earlier and is slowing the ajax response?

• phoenixwizard: Is declaring before refrencing going to make any difference?
• Endophage: No, but depending on your overall code structure it could just error, that was my only reason for mentioning it.
• phoenixwizard: I am going to try declaring the function before the ajax. Maybe that will make some difference. And yes I think avoiding anonymous pass through might help. I will try and get back with my results :)