Which of these constructs is better and why
setTimeout(function() { $('#secret').hide(); }, 5000);
setTimeout( "$('#secret').hide();", 5000);
$('#secret').show(5000, function(){ this.hide(xxx)} );
views:
90answers:
5
A:
Because you are using jQuery I think you should use third one.
Without jQuery first is better than second, because in second case JS engine has to eval expression and in first one doesn't.
giolekva
2009-10-23 13:26:21
OP here, thanks for the answer. I want to say that I'm not the person who voted you down. Maybe whoever it is will also explain to us why.
drummer
2009-10-23 13:32:13
Maybe cause I had some typos :)
giolekva
2009-10-23 13:33:51
i didnt vote this down, but it was probably voted down because his reasoning of using #3 is really bad. just because you are using jquery, doesnt mean you should use jquery functions for everything you do. also #1 and #3 are not the same thing
mkoryak
2009-10-23 13:35:56
-1, Just because I have yogurt in the fridge doesn't mean I should eat yogurt with every meal.
Malfist
2009-10-23 13:41:47
+4
A:
The first one for sure, it uses an anonymous function to capture the function to execute after the timeout.
Second one uses eval() to evaluate your string, which would probably be slower than the first option (nevermind the arguments for why using eval() is bad).
Third one shows the element over 5 seconds and then hides as soon as it completes, therefore is different from the first.
UPDATE:
nickf's update prompted me to look through the source and number 3 will execute immediately if the element is already visible. Here are the relevant lines of source code
if ( prop[p] == "hide" && hidden || prop[p] == "show" && !hidden )
return opt.complete.call(this);
Russ Cam
2009-10-23 13:30:55
A:
With the first one you loose the ability of concatenate that function with others. The second one is an evaluated string so you must be carefull about the context and anywway it's not good for performace. The last is better because after that you can call other jquery methods and jquery has also a better time-management.
mck89
2009-10-23 13:31:18
You say: "jquery has also a better time-management.", I say: "[citation needed]"
nickf
2009-10-23 13:35:29
If you look at jquery code it has some functions that manage time in a particular way (like animate()). I don't know if show() is one of that functions but if you include jquery is always better to use its methods.
mck89
2009-10-23 13:38:01
Thanks for the answer. If I use the last one, can you give me an example of the concatenation? I'm trying to visualize it to see the benefit.
drummer
2009-10-23 13:38:21
by "concatenation", he means "function chaining". `$x.doSomething().doSomethingElse().etc()`. In any case, jQuery handles time exactly the same as the rest of javascript, with timeouts and intervals like in the first two examples.
nickf
2009-10-23 13:44:34
You know what? I've changed my idea. The first is better. With the first you don't loose concatenation. With the last one you can concatenate other functions but i think it's useless beacause if you need to call other functions on that object you should call them after the hide method is triggered and with the last one you can't do it because it doesn't wait, with the first you can do it.
mck89
2009-10-23 13:44:50
jQuery's time management is based only on the methods that are available within JavaScript. Animations appear to use `setInterval()` internally
Russ Cam
2009-10-23 13:46:53
Yeah there's only one function to do it so it can't do without using setinterval, but there is an internal system to manage the time for animations, i've read something on the author's blog.
mck89
2009-10-23 13:50:12
I just read the source code :) There is indeed a queue system for managing animations, but internally, it uses `setInterval()` as far as I can see
Russ Cam
2009-10-23 13:56:11
I told you that the only way to work with time is setInterval and setTimeout and i know that it use them because it can't do it in other ways:). I was talking about the queue system that you have found too.
mck89
2009-10-23 14:00:37
A:
The first example and the third function differently, the first 5 seconds hidden '# secret' and the third is doing slowly in 5 seconds. it all depends on what you want to do.
andres descalzo
2009-10-23 13:31:22
+2
A:
Between options one and two, option one is better, since it doesn't need to evaluate the string to convert it to executable code.
Option three doesn't do the same thing. It might have the same output, but only because of a kludge: using some other function which takes a long time before calling the one you want. It's very inefficient and doesn't show exactly what you're trying to do.
Go with option one.
edit: Actually, I've just tested your option three, and can say that if the element is visible, then the callback happens immediately, regardless of the timeout you pass to the show() function.
nickf
2009-10-23 13:34:23