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

如果你使用很多选择器，你应该会看到显着的速度提升。

编辑：另一种加速代码的方法是给你想要隐藏公共类的所有元素，所以你只需要做类似的事情：

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

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

Answer 2

对于初学者来说，只要不与任何其他库冲突，就可以通过用（$）替换jQuery来节省一些下载时间。

但是，您也可以通过替换：

一次分配所有内容

 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 hideAll = function() {
           $('[class $="-inner"]').css({"opacity": "0"});
           $(':not[class $="-inner"]').css({"opacity": "0"});
           //or, replace the line above with
           $('[class ^="now-available"]').css({"opacity": "0"});
           $('[class ^="launched-shortly"]').css({"opacity": "0"});
    };

这只是例如，但逻辑可能并不完全符合您的要求（基本上，在此示例中具有类的所有内容的不透明度均为0）。

Answer 3

我的猜测当你“同时隐藏所有”然后“显示一个”时（图像通常是异步的），会导致图形卡顿。我不认为代码运行缓慢，这是一个图形冲突。将参数“exceptThisOne”添加到hideAll方法和hideServices方法中，并使它们成为case语句。由您决定如何处理冲突。

Answer 4

你可以做很多事情，但一个好的开始是确保你在生产中使用自定义.min版本的jquery。另一种方法是组合其中一些，例如：

jQuery(".services-inner").css({"opacity": "0"});
jQuery(".insignia-inner").css({"opacity": "0"});

变为

jQuery(".insignia-inner, .services-inner").css({"opacity": "0"});

Jquery docs：多个选择器（“selector1，selector2，selectorN”） http://api.jquery.com/multiple-selector/

我的jQuery运行有点慢。我该如何加快速度？

4 个答案: