Nested methods, best practice

Question

I'm currently fiddling around with jQuery's ajax method to get some data from a JSON feed and animating some bars according to the data.

As I'm hacking away, I don't really know if my approach is right.

$.ajax({

    url: "/echo/json/",
    type: "POST",
    data: data,
    success: function(data){


    $("#value1-bar .usage-bar-fill").animate({
        width: data.Value1
        }, 2500, function() {
        // Animation complete.
    });

    $("#value2-bar .usage-bar-fill").animate({
        width: data.Value2
        }, 2500, function() {
        // Animation complete.
    });

    },
    dataType: "json"
});

Is it OK to animate the divs from inside the ajax method, or is there a more correct way to do this - formatting wise, memory wise etc.?

Is it better to some how return some variables from the ajax method and executing the animation method from outside the ajax method?

Check out jsfiddle example here: http://jsfiddle.net/timkl/KPvCj/

I know this is a pretty broad question, but being a graphic designer come self-taught web designer - I never really know if what I'm doing is good practice.

Answer 1

I like this question, and I'd love to see some more detailed feedback, but I'd say it looks good. You're already calling an embedded success function within the ajax method, so worrying about memory / performance of further embedded functions seems almost negligible...

If you're going to want to animate your usage-bar-fills some more with the same / similar animation you used within your success function, then I might create separate functions and call those instead...but I'm sure you knew that already ;)

Nice question!

Answer 2

This is nearly a question of taste, since this seems to be a very small application. When your applications grow, overall design and principles becomes a more crucial part of the process.

But that said, I don't like this approach. It is very prone to produce code that repeats itself unnecessarily - unless these are strictly one-off situations that are very specific to this use case, but most of the time you can generalize to enable code reuse.

Personally, I would declare the callback functions elsewhere, probably on an object which already knows what it should be working with (i.e. your selector) and knows what to do with it. This way, the code almost structures itself, keeping only the very locally relevant bits where they are needed.

In this specific case, it would be something along the lines of a graph object, which when set a value updates its own display/view appropriately.

Hopefully my ramblings make sense. I might be a tad too tired to give out opinions and expert advice, so I'll just stop here.