javascript - 我的 jQuery 运行有点慢。我怎样才能加快速度？

Question

我可以做些什么来加快速度吗？或者您注意到任何新手错误吗？

我注意到我重复了很多变量。这样我就不必写出每一行，但我不确定是否有更好的解决方案？

该问题通常发生在未进入该选项卡后切换回该选项卡时。单击外环需要几秒钟才能响应，但之后就没事了。几乎就像有剩余的代码正在运行它需要重写？我不确定，但我希望有经验的用户能够仔细检查我的代码，看看有哪些可以改进的地方。

这是一个工作的 jsFiddle http://jsfiddle.net/eA6x6/1/ ，下面是我的完整 JavaScript 代码。

jQuery(document).ready(function() {

var timeoutHandle;

// hide stuff
    var hideServices = function() {
            jQuery(".services-inner").css({"opacity": "0"});
            jQuery(".insignia-inner").css({"opacity": "0"});
            jQuery(".insignia-inner-text").css({"opacity": "0"});
    };

    var hideAll = function() {
            jQuery(".military-kit-inner").css({"opacity": "0"});
            jQuery(".property-inner").css({"opacity": "0"});
            jQuery(".home-contents-inner").css({"opacity": "0"});
            jQuery(".travel-inner").css({"opacity": "0"});
            jQuery(".events-inner").css({"opacity": "0"});
            jQuery(".adventurous-training-inner").css({"opacity": "0"});
            jQuery(".personal-injury-inner").css({"opacity": "0"});
            jQuery(".challenge-pursuits-inner").css({"opacity": "0"});
            jQuery(".sports-and-tours-inner").css({"opacity": "0"});
            jQuery(".winter-sports-inner").css({"opacity": "0"});

            jQuery(".now-available").css({"opacity": "0"});
            jQuery(".now-available-background").css({"opacity": "0"});
            jQuery(".launched-shortly").css({"opacity": "0"});
            jQuery(".launched-shortly-background").css({"opacity": "0"});
    };

    var showServicesDelay = function() {
            timeoutHandle = setTimeout(function () {
                    jQuery(".services-inner").css({"opacity": "0.5"});
                jQuery(".insignia-inner").css({"opacity": "1"});
                jQuery(".insignia-inner-text").css({"opacity": "1"});
                hideAll();
        }, 5000);       
    };

// show messages
    var showLaunchedShortly = function() {
            jQuery(".launched-shortly").css({"opacity": "1"});
            jQuery(".launched-shortly-background").css({"opacity": "1"});
    };

    var showNowAvailable = function() {
            jQuery(".now-available").css({"opacity": "1"});
            jQuery(".now-available-background").css({"opacity": "1"});
    };

// show services
    var showMilitaryKit = function() {
            jQuery(".military-kit-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showProperty = function() {
            jQuery(".property-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);    
    };

    var showHomeContents = function() {
            jQuery(".home-contents-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showTravel = function() {
            jQuery(".travel-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showEvents = function() {
            jQuery(".events-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showAdventurousTraining = function() {
            jQuery(".adventurous-training-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showPersonalInjury = function() {
            jQuery(".personal-injury-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showChallengePursuits = function() {
            jQuery(".challenge-pursuits-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showSportsAndTours = function() {
            jQuery(".sports-and-tours-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };

    var showWinterSports = function() {
            jQuery(".winter-sports-inner").css({"opacity": "1"});

            clearTimeout(timeoutHandle);
    };





// military kit
    jQuery(".military-kit-hover").click(function() {        
        hideAll();
        hideServices();
        showMilitaryKit();
        showServicesDelay();
        showNowAvailable();
    });

// property
    jQuery(".property-hover").click(function() {
        hideAll();
        hideServices();
        showProperty();
        showServicesDelay();
        showNowAvailable();
    }); 

// home contents
    jQuery(".home-contents-hover").click(function() {
        hideAll();
        hideServices();
        showHomeContents();
        showServicesDelay();
        showNowAvailable();
    }); 

// travel
    jQuery(".travel-hover").click(function() {
        hideAll();
        hideServices();
        showTravel();
        showServicesDelay();
        showNowAvailable();
    }); 

// events
    jQuery(".events-hover").click(function() {
        hideAll();
        hideServices();
        showEvents();
        showServicesDelay();
        showLaunchedShortly();
    }); 

// adventurous training
    jQuery(".adventurous-training-hover").click(function() {
        hideAll();
        hideServices();
        showAdventurousTraining();
        showServicesDelay();
        showLaunchedShortly();
    }); 

// personal injury
    jQuery(".personal-injury-hover").click(function() {
        hideAll();
        hideServices();
        showPersonalInjury();
        showServicesDelay();
        showNowAvailable();
    }); 

// challenge pursuits
    jQuery(".challenge-pursuits-hover").click(function() {
        hideAll();
        hideServices();
        showChallengePursuits();
        showServicesDelay();
        showNowAvailable();
    }); 

// sports and tours
    jQuery(".sports-and-tours-hover").click(function() {
        hideAll();
        hideServices();
        showSportsAndTours();
        showServicesDelay();
        showLaunchedShortly();
    }); 

// winter sports
    jQuery(".winter-sports-hover").click(function() {
        hideAll();
        hideServices();
        showWinterSports();
        showServicesDelay();
        showLaunchedShortly();
    }); 
});

Answer 1

加速 jQuery 的一种方法是缓存 DOM 元素，以减少多次选择同一元素的次数，这涉及每次在 DOM 中搜索该元素 - 这可能会很慢并且占用大量资源，具体取决于如何选择您的 DOM 很大或很复杂。

基于您的代码的示例:

var insigniaInner = jQuery('.insignia-inner'); //cache the div to a variable

...

//use the variable in your code instead of jQuery('.insignia-inner');
insigniaInner.css({"opacity":0});

如果您使用大量选择器，您应该会看到速度显着提高。

编辑:另一种加快代码速度的方法是为所有要隐藏的元素提供一个公共(public)类，因此您只需执行以下操作:

jQuery('.hide').hide();

这也将减少选择器调用。另一种方法是定位父元素并淡出或隐藏它，而不是单个元素。