JQueryの色変更スクリプトの最適化

debugcn 投稿 Dev

クリストバオフ

以下のこのコードをさらに最適化できますか？現在書かれているように、リソースを使いすぎているように感じます（私の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）で公開されています。私はこれをしばらく使用していて、今日は少しクリーンアップし、ここの3番目の回答で提案されているようにcssに「transition」を追加しました。スムーズに色が変わる背景に透明度を適用する方法

事前にThx-クリス。

//回答に続くコードアップデート1https：//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);

 };

});

//回答に続くコードアップデート2https：//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);
    };
});

リチャードパーナビー-キング

DOMルックアップの数を減らす

このコードを実行するたびに、同じdom要素を検索しています。関数の外部の変数にjQueryオブジェクトを格納して、CPUセージを向上させることができます。

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、関数を呼び出すよりも2秒長くかかります。最初のループまたは2つは問題ないかもしれませんが、最終的には、要素が同時に2つまたは3つの色に変更しようとします。を削除しsetInterval、アニメーション関数の1つへのコールバックとして関数を追加します。また、両方のアニメーションの実行に同じ時間をかけたい場合7000は、を変数に置き換えます。これにより、開発中に1つの場所でのみ値を変更し、両方のルールを同時に実行できます。

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-28

コメントを追加

サインイン

分類Dev

Related 関連記事

記事