You totally suck at JQuery (chaining)
-
[sup]Preface: One of my favorite series is You Suck at Photoshop. From it, I learned many valuable tips, all while laughing hysterically at the abusive humor. Tuck suggested I do a You Suck at Programming series, so… here you go.[/sup]
So… you’re making a web app, and you want to do some fancy-schmancy effects on the client. You’re all kinds of excited, because you figured out how to source JQuery directly from the CDN, and after some googling and copy-pastaing, you’ve got a DOM element that changes color and size when you press a button.
You probablly think you’re sooo cool because your code is soooo clean:
[code]
$(“#object”).addClass(“active”);
$(“#object”).css(“color”,“#f0f”);
$(“#object”).height(300);
[/code]But in fact you’re just wasting precious CPU time, and all kinds of typing. You totally suck at JQuery.
What you should have done, assuming you’re not a total idiot, is chain your methods together:
[code]
$(“#object”).addClass(“active”).css(“color”, “#f0f”).height(300);
[/code]The reason for doing this is multiple: Besides the obvious choice of not looking like a baboon with a english degree wrote the code, your selector is only executed once, increasing the performance of your app, and not robbing the CPU of precious porn-decoding power.
And with that, you thought you were set, so you got all kinds of excited and thought you’d make a message flash on the screen, briefly fading in before rapidly fading out:
[code]
$(“#message”).fadeIn().fadeOut();
[/code]Of course as soon as you ran this, it became glaringly obvious you didn’t have the first clue what you were really doing, and should probablly go back to mopping floors at your local McDonalds for minimum wage, since you’ll never have a real career as a web designer anyway. Your message did this spooky voodoo dance of fading in and out at the same time, and naturally you’re clueless as to why.
Here’s what you should have done:
[code]
$(“#message”).fadeIn(function(){ $(“#message”).fadeOut();});
[/code]You see, even the most inexperienced neophyte knows that Javascript is asynchronous, and as soon as you call a function, it’s going to return and the next one will be executed. So what you need to do is pass a function to fadeIn, which will get called when the fadeIn effect is FINISHED… kind of like your career.
Of course if you REALLY cared about performance, you’d have taken the clue from the previous mistake you made of caching your selector:
[code]
var $message = $(“#message”);
$message.fadeIn(function(){ $message.fadeOut(); });
[/code]But you didn’t think of that on your own, did you. No. Of course not.
And that’s why you suck at JQuery.
-
[quote name=“Kevlar” post=“49354” timestamp=“1388712210”]
not robbing the CPU of precious porn-decoding power.
[/quote]I knew I was doing something wrong …
[code]$(“#object”).addPorn(“active”);
$(“#object”).xxx(“color”,“#666”);
$(“#object”).height(34DD);[/code] -
Is it possible to delete $message now?
*ducks*
-
I’m glad to see I already do this. Writing a PhoneGap app for the disaster that is the Android 2.x JavaScript parser forces one to learn these little tricks.
