提高我的JQuery的性能

Question

我是JavaScript和JQuery世界的新手,所以我的代码结构仍然存在.我知道有一些编写方法可以减少对性能的压力,从而使您的程序更快地运行.

我已经研究了各种方法来实现这一目标,但却看不出如何将它应用到我拥有的东西上.我正在寻找堆栈溢出,以帮助向我展示一些关于使我的代码在结构上更健全的指示.

            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('')
                });

            }

我的代码中的这个if语句之一.我明白我应该单独完成每项任务,但我不知道从哪里开始.

有人可以指出我正确的方向,以便我可以开始处理我的其余代码.谢谢!

Answer 1

1)使用链接,它将减少DOM请求的数量:

    $(right).val('Well Done!')
            .show();

2)如果你多次使用它们,请缓存变量:

    $dropbox = $('.drop-box.spellword');
    $dropbox.css(bla bla bla...);