优化 JQuery 颜色更改脚本

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) 上发布 我已经使用了一段时间，今天我对其进行了一些清理，并按照此处第三个答案中的建议在我的 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 代替吗？