Question

以下代码可以进一步优化吗？我觉得它现在使用了太多的资源（我的JS测试知识几乎没有......）。我欢迎提示和重写。

    jQuery(document).ready(function($) {

$(document).ready(function() {setInterval(function () {spectrum()},5000); });

 function spectrum(){
    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    $('.front-panel-heading').animate( { backgroundColor: hue },7000);
    $('#content h2 > span').animate( {color:hue}, 7000);
    $('#colophon > div > span').animate( {color:hue}, 7000);
 };
});

注意：该脚本在我的个人网站上发布（apleasantview.com）我已经使用了一段时间了，今天我把它清理了一下，并添加了“过渡”＃39;在我的CSS中，如第三个答案所示： How to apply transparency to a background that changes color smoothly

提前 - 克里斯。

//代码更新1，回答https://stackoverflow.com/a/24079418/2947983

jQuery(document).ready(function($) {

setInterval(function () {spectrum()},5000);

function spectrum(){
    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

    $('div#front-panel-bkgr').animate( {backgroundColor:hue}, 7000);
    $('span#clr-swtch').animate( {color:hue}, 7000);

 };

});

//代码更新2在回答https://stackoverflow.com/a/24121309/2947983

之后

jQuery(document).ready(function ($) {

    setInterval(function () {
        spectrum()
    }, 7000);

    var frontPanel = $('div#front-panel-bkgr'),
        clrSwitch = $('span#clr-swtch'),
        timer = 7000;
        spectrum();

    function spectrum() {
        var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        frontPanel.animate({backgroundColor: hue}, timer);
        clrSwitch.animate({color: hue}, timer);
    };
});

Answer 1

减少DOM查找次数

每次运行此代码时，您都在查找相同的dom元素。您可以将jQuery对象存储在函数外部的变量中，以改善cpu-sage。

jQuery(document).ready(function ($) {

    setInterval(function () {
        spectrum()
    }, 5000);

    var frontPanel = $('div#front-panel-bkgr'),
        clrSwitch = $('span#clr-swtch');

    function spectrum() {
        var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        frontPanel.animate({backgroundColor: hue}, 7000);
        clrSwitch.animate({color: hue}, 7000);
    };
});

时序

你的动画比调用该函数的setInterval花了两秒钟的时间。对于第一个或第二个循环，您可能没问题，但最终您将尝试将元素同时更改为两个或三个颜色。删除setInterval并将该函数添加为其中一个动画函数的回调。此外，如果您希望两个动画都花费相同的时间来运行，请将7000替换为变量。这将允许您仅在一个位置更改开发期间的值，并同时运行两个规则：

jQuery(document).ready(function ($) {

    var frontPanel = $('div#front-panel-bkgr'),
        clrSwitch = $('span#clr-swtch'),
        timer = 7000;
    spectrum();
    function spectrum() {
        var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        frontPanel.animate({backgroundColor: hue}, timer);
        clrSwitch.animate({color: hue}, timer, spectrum());
    };
});

<强> [编辑]

因为回调是自引用的，所以会发生无限循环。我认为浏览器（或者可能是jQuery？）已经解决了这个问题并且抛出了范围错误。要解决此问题，请将回调包装在匿名函数中：

        clrSwitch.animate({color: hue}, timer, function() {spectrum();});

Answer 2

1）如果#content h2或#colophon > div中只有一个范围，则为他们添加ID

2）您正在使用双$(document).ready()，仅使用第一个，并将函数光谱移离$(document).ready

3）.front-panel-heading - 不能用id替换吗？

优化JQuery颜色更改脚本

2 个答案:

减少DOM查找次数

时序