CODEWITHSUNDEEP
javascriptjquery
m.spyratos
m.spyratos

Reputation: 4229

Jquery | Function inside same function. It bad practice?

I am using this function for easiness, as I am going to use fadeTo a lot:

function fade_to(div, speed, opacity, after_fade) {
    $(div).fadeTo(speed, opacity, after_fade);
}

Then I am calling the same function for after_fade parameter:

fade_to('#div', 3000, 1, function() { fade_to('#another_div', 3000, 1)});

Is that a bad thing to do? Will I have speed/smoothness issues? Is it better to just use jQuery's default fadeTo function?

Thanks!

Upvotes: 3

Views: 1300

Answers (6)

Emad Rahnama
Emad Rahnama

Reputation: 1238

It is better to just use jQuery's default fadeTo function. just this.

Upvotes: 1

Fresheyeball
Fresheyeball

Reputation: 30015

There is no gain to be made with your method. Plus you are using the jQuery fadeTo function. There is nothing wrong with what you did, just no gain. You could save work with such a technique if for example you had less arguments in your custom function:

function fade_to(div, after_fade) {
    $(div).fadeTo(3000, 1, after_fade);
}

fade_to('#div', function(){ fade_to('#another_div', $.noop); });

This would actually save you work by preventing you from having to enter speed and opacity arguments. You could also curry it like this

function Fade_to(speed, opacity){
     return function(div, callback){
           $(div).fadeTo(speed, opacity, callback);
     }
}

Then you could make argument saving functions on the fly like

var fade_to_foo = Fade_to(3000, 1);
fade_to_foo('#div', function(){ fade_to_foo('#another_div'); });

Otherwise there is no reason not to just write it the jQuery way

$('#div').fadeTo(3000, 1, function(){ $('#another_div').fadeTo(3000, 1); });

Upvotes: 5

Namphibian
Namphibian

Reputation: 12221

Your approach is convenient. I doubt it will slow down the fade effect. There is nothing wrong with this approach in my mind. If you decided that your fade effect should pulse or blink before fading you would only need to modify your function to pulse/blink and then fade all calls to fade would then run the new routine. In this case it makes sense as it reduces code and improves maintainability. Ericosg does make a valid point though why not reduce the paramaters if they are going to be the same.

Upvotes: 1

sacredfaith
sacredfaith

Reputation: 870

Mike,

I don't know that this is necessarily a 'bad' thing to do, as it might offer easier usability or something (not sure, given that I don't know the context of your example) that using the standard function given in an API wouldn't otherwise.

Actually, having a function call itself is using an idea in CS called 'recursion' which can be useful for traversing trees (you can google both recursion, and trees to get a better idea of what I'm referring to here), or performing some kind of mathematical operation (i.e. Euclidean algorithm).

I would say, that if you're doing this, it's a great idea to ask "why". You won't be gaining anything in terms of speed since you're passing the parameters an extra time, and your function isn't accomplishing anything extra compared to the API's implementation (at least that I'm seeing). If you were to make a habit out of this...let's say with a more computationally taxing function...you might notice a slowdown.

I'm hoping to not just answer your question here, but to give you some further insight as to why it's generally a bad idea to do this. I agree with dunsmoreb, and Thomasdotnet as well. Good points!

-sf

Upvotes: 1

Ram
Ram

Reputation: 144709

this practice is against the goal of using jQuery as a chainable, short-syntax library. however if this specific functionality is useful for a project, can be effective.

Upvotes: 1

Thomasdotnet
Thomasdotnet

Reputation: 51

It's a bad practice because you cannot use any more modifiers without applying them to every instance your function is called. Since you can chain modifiers in jQuery, and most would agree that doing so is a useful feature, you are disabling that useful feature for yourself or anyone else working on this code body.

If you want to add any additional animations or stylings, you'll have to select the object again through regular jQuery this time. Extra work, extra calls, no real benefit.

Upvotes: 5

Related Questions