Reputation: 951
I am fairly new to the JavaScript and JQuery world so the structure of my code is still getting there. I understand that there are methods of writing it so that it puts less strain on performance and thus makes your program work faster.
I have looked at various ways to achieve this but can't see how to apply it to what I have. I am looking to stack overflow to help show me a few pointers on making my code more structurally sound.
console.log(wordIsCorrect);
console.log($('.drop-box.spellword').length);
if ($('.drop-box.spellword').length == wordIsCorrect) {
$('.drop-box.spellword').addClass('wordglow2');
$(right).val('Well Done!');
$(right).show();
audioS.play();
$('.counter').html(completeWords + '/6').show();
$(wrong).hide();
$('.minibutton').prop('disabled', false);
var completeLetters = $('.wordglow2').length;
var completeWords = (completeLetters / 3);
$('.counter').html(completeWords + '/6');
if (completeWords == 3) {
$('table').fadeOut(2000);
}
var incompleteWords = $('.spellword').hasClass('.wordglow4').length;
if (incompleteWords == 3) {
$('.minibutton').prop('disabled', false);
}
} else {
$('.drop-box.spellword').addClass("wordglow4").css('color', 'transparent');
$(wrong).val('Try Again');
$('.minibutton').prop('disabled');
$(wrong).show();
audioF.play();
$('.counter').html(completeWords + '/6').show();
$(right).hide();
$('.drop-box.spellword').animate({
'opacity': 1
}, 1000, function() {
$(this).removeClass('wordglow4').removeClass('occupied').html('')
});
}
This one of the if statements in my code. I understand that I should be breaking each task up individually but I don't know where to start.
Can someone point me in the right direction so that I can start tackling the rest of my code. THANKS!
Upvotes: 0
Views: 132
Reputation: 3456
As things have already been told I am just adding tips ...
sometime when processing on nested elements and their parents, use the "end()" method : I'm not going to copy/complete jQuery documentation since it is well documented see jQuery's end() function documentation
Add this to your bookmarks :
http://api.jquery.com/
http://www.artzstudio.com/2009/04/jquery-performance-rules/
Upvotes: 1
Reputation: 177950
Something like this
var spellword = $('#spellword'); // give it an ID and cache the object
console.log(wordIsCorrect);
console.log(spellword.length);
if (spellword.length == wordIsCorrect) {
spellword.addClass('wordglow2');
$(right).val('Well Done!').show();
audioS.play();
// $('.counter').html(completeWords + '/6').show(); // will be done later again
$(wrong).hide();
$('.minibutton').prop('disabled', false);
var completeLetters = $('.wordglow2').length;
var completeWords = (completeLetters / 3);
if (completeWords == 3) {
$('#table1').fadeOut(2000); // give it an ID
}
var incompleteWords = spellword.hasClass('.wordglow4').length>0;
if (incompleteWords == 3) {
$('#minibutton').prop('disabled', false); // give an ID
}
} else {
spellword.addClass("wordglow4").css('color', 'transparent');
$('#minibutton').prop('disabled',true); // give an ID and a value
$(wrong).val('Try Again').show();
audioF.play();
$(right).hide();
spellword.animate({
'opacity': 1
}, 1000, function() {
$(this).removeClass('wordglow4').removeClass('occupied').empty()
});
}
$('#counter').html(completeWords + '/6').show(); // give it an ID instead of a class
Upvotes: 0
Reputation: 2727
Besides chaining, using context
will also improve (selector) performance. This will tell the selector where to look for the given element (as opposed to always starting from the DOM root). Say you have a particular DIV 'target' you want to target, which is somewhere inside another DIV 'container', you can do this:
$('#target', '#container').dostuff();
or
$('#myButton').click(function(){
$('span', this).addClass('bar');
});
(where this
is the context)
see more about context here: Performance of jQuery selector with context
Upvotes: 2
Reputation: 6175
One of the things you should look at is chaining your jQuery calls.
For example:
$('#myinput').val("foo");
$('#myinput').show();
can be written as
$('#myinput').val("foo").show();
since each call to a jquery function (usually) returns the same object. This isn't always the case; after using a function like height() or find(..) obviously the object will no longer be the same jQuery object you started with so you need to make sure of your function order.
This may give a tiny speed increase because jQuery isn't having to go all the way through creating that object again each time. You can also "cache" jquery objects to the same effect, like so:
var myinput = $('#myinput');
myinput.val("foo");
// ... later
myinput.show();
Which saves multiple jQuery calls.
These optimisations are very small, but they mount up quickly as javascript events can be fired off all the time.
Upvotes: 3
Reputation: 337
1) Use chaining, it will decrease number of DOM requests:
$(right).val('Well Done!')
.show();
2) And cache variables if you use them more then once:
$dropbox = $('.drop-box.spellword');
$dropbox.css(bla bla bla...);
Upvotes: 5