3

私は、特定の間隔でフェードインおよびフェードアウトするために多くのオブジェクトを必要とするWebアートプロジェクトに取り組んでいます（100以上のオブジェクトを使用することを望んでいました）。jQがメタデータを含むXMLファイルを読み取り、本文にPを追加すると、メタデータの情報に基づいてフェードインおよびフェードアウトするように指示されます。これを実現するためにsetTimeoutsを使用しています。

この作品は、非常に多くのリソースを消費することになります。ページを読み込んでから1〜2分以内に、私のマシンは喘鳴を開始します。（あるいは、リソースの問題ではなく、グラフィカルな問題である可能性があると考えています。）

これをよりリソースフレンドリー/効率的にするためのアドバイスはありますか？助けてくれてありがとう！

ライブリンクは次のとおりです：http：//justwhatdoyoucallthis.com/trynottogiveup/（リソースの浪費に注意してください）

関連するスクリプトは次のとおりです。

$.ajax({
    type: 'get',
    url: 'problems.xml', /* ...which contains like 99 problems */
    dataType: 'xml',
    success: function(problems) {
        $(document).ready(function() {
            var winWidth=$(window).width();
            var winHeight=$(window).height();
            $(problems).find('problem').each(function() {
                var probType=$(this).attr('type');
                var probAppear=$(this).attr('appear');
                var probName=$(this).children('name').text();
                var probID=(probName.replace(/\s/g, '')).toLowerCase();
                var probIntensity=($(this).children('intensity').text()+5)*10;
                var probInterval=$(this).children('interval').text();
                var probDuration=$(this).children('duration').text();
                var ranLeft=Math.random()*winWidth-(probIntensity/2);
                var ranTop=Math.random()*winHeight-(probIntensity/2);
                $('body').append('<p id="'+probID+'" class="'+probType+'" style="left: '+ranLeft+'px; top: '+ranTop+'px; height: '+probIntensity+'px; width: '+probIntensity+'px;"><span>'+probName+'</span></p>');
                (function showLoop() {
                    if(probAppear=='fade') { var fadeInDuration=1000; } else { var fadeInDuration=0; }
                    $('#'+probID).delay(probInterval*1000).fadeIn(fadeInDuration).delay(probDuration*1000).fadeOut(1000);
                    setTimeout(showLoop, 1000);
                })();
            });
        });
    }
});
4

1 に答える 1

1

これがあなたのコードの最適化されたバージョンですが、bvukelicが言ったように、全体の概念はおそらくキャンバスでより効率的でしょう。

とにかくコードで私が見る問題は、遅延アクションとフェードアクションが実際に同期的に呼び出されることですが、タイムアウトは非同期で実行されます。つまり、しばらくすると、同じオブジェクトに対して複数のアクションストリームがあります（これは最大100回）。 。

したがって、解決策は、.fadeOut（）アクションへのコールバックとして繰り返されるタイムアウトを追加することです。

$(function() {
    var $win = $(window),
        winWidth = $win.width(),
        winHeight = $win.height(),
        showLoop = function(prob) {
            var fadeInDuration = prob.appear == 'fade' ? 1000 : 0;
            $('#'+prob.id)
                .delay(prob.interval*1000)
                .fadeIn(fadeInDuration)
                .delay(prob.duration*1000)
                .fadeOut(1000, function() {
                    window.setTimeout(function() {
                        showLoop(prob); // synchronously repeated callback
                    }, 1000);
                });
        };

    $.ajax({
        type: 'get',
        url: 'problems.xml', /* ...which contains like 99 problems */
        dataType: 'xml',
        success: function(problems) {        
            $('problem', problems).each(function() {
                var $t = $(this),
                    probName = $('name', this).text(),
                    prob = {
                        type: $t.attr('type'),
                        appear: $t.attr('appear'),
                        name: probName,
                        id: probName.replace(/\s/g, '').toLowerCase(),
                        intensity: (parseInt($('intensity', this).text()) + 5) * 10,
                        interval: parseInt($('interval', this).text()),
                        duration: parseInt($('duration', this).text()),
                        pos: {
                            top = Math.random()*winHeight-(prob.intensity/2),
                            left = Math.random()*winWidth-(prob.intensity/2)
                        }
                    };

                $('<p>')
                    .append('<span>'+prob.name+'</span>')
                    .attr('id', prob.id)
                    .addClass(prob.type)
                    .width(prob.intensity)
                    .height(prob.intensity)
                    .css({
                        top: prob.pos.top,
                        left: prob.pos.left,
                    })
                    .appendTo('body');

                showLoop(prob);
            });
        }
    });
});
于 2013-01-08T12:09:02.820 に答える