3

我正在从事一个网络艺术项目，该项目需要许多对象以一定的间隔淡入和淡出（我希望使用 100 个或更多对象）。我让 jQ 读取包含元数据的 XML 文件并将 Ps 附加到正文，然后根据元数据中的信息告诉它们淡入和淡出。我正在使用 setTimeouts 来完成此操作。

这件作品最终会占用大量资源。在加载页面后的一两分钟内，我的机器开始喘息。（或者，我认为这可能不是资源问题，而是图形问题。）

有没有人有一些建议可以使这更加资源友好/高效？我很感激任何帮助！

这是实时链接： 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 所说的那样，整个概念使用画布可能会更有效。

无论如何，我在代码中看到的问题是延迟和淡入淡出动作确实是同步调用的，但是超时是异步执行的，这意味着一段时间后，您对同一个对象有多个动作流（最多一百次） .

因此解决方案是将重复的超时作为回调附加到 .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 回答