Question

这是我为雪花试过的代码。一切似乎都没问题但是一旦脚本无响应意味着一段时间（它会慢慢浏览器firefox）。我不确定为什么会这样。如何在没有任何浏览器的情况下使其成为响应。这是 FIDDLE

我怎样才能使它成为响应式脚本而不会引起任何问题。我想我在循环javascript函数时犯了一个错误:( 任何建议都会很棒。

由于

使用Javascript：

// window.setInterval(generateSnow, 0);
var windowHeight = jQuery(document).height();
var windowWidth = jQuery(window).width();
function generateSnow() {
    for (i = 0; i < 4; i++) {
        var snowTop = Math.floor(Math.random() * (windowHeight));
        snowTop = 0;

        var snowLeft = Math.floor(Math.random() * (windowWidth - 2));
        var imageSize = Math.floor(Math.random() * 20);

        jQuery('body').append(
            jQuery('<div />')
                .addClass('snow')
                .css('top', snowTop)
                .css('left', snowLeft)
                .css('position', 'absolute')
                .html('*')
        );
    }
}


function snowFalling() {
    jQuery('.snow').each(function(key, value) {
        if (parseInt(jQuery(this).css('top')) > windowHeight - 80) {
            jQuery(this).remove();
        }
        var fallingSpeed = Math.floor(Math.random() * 5 + 1);
        var movingDirection = Math.floor(Math.random() * 2);
        var currentTop = parseInt(jQuery(this).css('top'));
        var currentLeft = parseInt(jQuery(this).css('left'));
        jQuery(this).css('top', currentTop + fallingSpeed);
        if (movingDirection === 0) {
            jQuery(this).css('bottom', currentLeft + fallingSpeed);
        } else {
            jQuery(this).css('bottom', currentLeft + -(fallingSpeed));
        }
    });
}

window.setInterval(snowFalling, 15);
window.setInterval(generateSnow, 1000);

Answer 1

您在运行时在页面上添加和删除 lot 元素，使浏览器经常刷新该页面的结构。

这种方法是：

你可以做的最糟糕的表现
一旦生成，删除，生成，删除，生成，删除了足够的DIV，可能会使浏览器瘫痪......

使用此配置，移动浏览器可能会在2秒后冻结。

我建议在开始时预先生成所有DIV，重新使用它们并使用CSS动画或jQuery animate()来完成你想要做的事情。

Answer 2

正如@ZathrusWriter所提到的，你应该重新使用你的雪花元素，这样内存就不会膨胀。

创建一堆雪花后浏览器开始变慢的原因是JavaScript使用garbage collector管理内存。因此，释放内存比为新雪花分配内存要慢得多。理想情况下，您希望为所有雪花分配一次内存。

基本上，在任何给定时间为屏幕上想要的雪花数量创建元素。将它们全部放在屏幕上的随机位置即可开始。然后，一旦雪花离屏或看不见，那雪花就可以再次使用了。因此，您将它移回到顶部（可能在另一个随机位置）并使其再次像雪花一样落下（而不是删除它并创建一个新的）。

这离创建粒子发射器只有一步之遥。

循环函数导致它在javascript中无响应

2 个答案: