Question

我正在开展一个网络艺术项目，需要许多对象以一定的间隔淡入和淡出（我希望使用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);
                })();
            });
        });
    }
});

Answer 1

这是您的代码的优化版本，但像bvukelic所说，整个概念可能会更有效地使用canvas。

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

因此，解决方案是将重复超时附加为.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);
            });
        }
    });
});

JS / jQ处理大量setTimeouts的更有效方法

1 个答案: