0

我对 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 语句之一。我知道我应该单独分解每项任务，但我不知道从哪里开始。

有人可以指出我正确的方向，以便我可以开始处理我的其余代码。谢谢！

4

5 回答 5

5

1）使用链接，它会减少DOM请求的数量：

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

2）如果您多次使用它们并缓存变量：

    $dropbox = $('.drop-box.spellword');
    $dropbox.css(bla bla bla...);
于 2012-09-14T08:35:09.737 回答
3

您应该查看的一件事是链接您的 jQuery 调用。

例如：

$('#myinput').val("foo");
$('#myinput').show();

可以写成

$('#myinput').val("foo").show();

因为每次调用 jquery 函数（通常）都返回相同的对象。情况并非总是如此。在使用像 height() 或 find(..) 这样的函数之后，显然该对象将不再是您开始使用的同一个 jQuery 对象，因此您需要确保您的函数顺序。

这可能会稍微提高速度，因为 jQuery 不必每次都重新创建该对象。您还可以“缓存” jquery 对象以达到相同的效果，如下所示：

var myinput = $('#myinput');

myinput.val("foo");
// ... later
myinput.show();

这节省了多个 jQuery 调用。

这些优化非常小，但它们会迅速增加，因为 javascript 事件可以一直被触发。

于 2012-09-14T08:37:12.507 回答
2

除了链接之外，使用context还可以提高（选择器）性能。这将告诉选择器在哪里寻找给定的元素（而不是总是从 DOM 根开始）。假设您有一个特定的 DIV“目标”要定位，它位于另一个 DIV“容器”内，您可以这样做：

$('#target', '#container').dostuff();

或者

$('#myButton').click(function(){
    $('span', this).addClass('bar');
});

（this上下文在哪里）

在此处查看有关上下文的更多信息：带上下文的 jQuery 选择器的性能

于 2012-09-14T08:42:25.467 回答
1

正如已经被告知的那样，我只是在添加提示...

有时在处理嵌套元素及其父元素时，使用“end()”方法：我不会复制/完成 jQuery 文档，因为它有很好的文档，请参阅 jQuery 的 end() 函数文档

将此添加到您的书签中：

http://api.jquery.com/
http://www.artzstudio.com/2009/04/jquery-performance-rules/
于 2012-09-14T08:45:48.083 回答
0

像这样的东西

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
于 2012-09-14T08:44:57.023 回答