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
}

Calling a function shouldn't cause any visible performance lag. Can you post some sample code that exhibits your problem? — casablanca
– casablanca, Commented Feb 22, 2012 at 4:26
Please include code samples or a link to jsFiddle or something so we can see the problem. — JohnFx
– JohnFx, Commented Feb 22, 2012 at 4:27
I have included the skeletal of the code. Its simple JSON parsing and filling the data in the DOM — phoenixwizard
– phoenixwizard, Commented Feb 22, 2012 at 4:37
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 — Calvin
– Calvin, Commented Feb 22, 2012 at 4:42
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? — casablanca
– casablanca, Commented Feb 22, 2012 at 4:44

Endophage · Accepted Answer · 2012-02-22 04:51:15Z

2

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?

answered Feb 22, 2012 at 4:51

Endophage

21.6k13 gold badges62 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

phoenixwizard Over a year ago

Is declaring before refrencing going to make any difference?

Endophage Over a year ago

No, but depending on your overall code structure it could just error, that was my only reason for mentioning it.

phoenixwizard Over a year ago

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 :)

Collectives™ on Stack Overflow

Javascript call a function or inline code?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related