sMilbz
sMilbz

Reputation: 951

Increasing the performance of my JQuery

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

Answers (5)

Stphane
Stphane

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

mplungjan
mplungjan

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

Klaas Leussink
Klaas Leussink

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

moopet
moopet

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

Yakovenko Max
Yakovenko Max

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

Related Questions