循环功能导致它在JavaScript中无响应

这是我试过的雪花的代码。一切似乎都没问题，但一旦脚本无响应的一段时间意味着（它减慢了浏览器的Firefox）。我不知道为什么会发生这种情况。我怎样才能使它作为响应而无需任何东西浏览器。这里是FIDDLE循环功能导致它在JavaScript中无响应

我怎样才能使它响应脚本，不会引起任何！我想我在循环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);

来源

2013-10-11 Vignesh Pichamani

不是一个完整的答案，因此它只是一个评论，但你不需要像这样的脚本。你可以使用CSS转换或jQuery动画。只需创建雪花并设置动画类型和长度，并用回调在最后删除它。比上述更容易，并且不会有任何响应性问题（除非你变得愚蠢：p） – Archer

另外，这种应用程序更适合使用HTML画布而不是DOM操作。 –

我试图通过减少dom插入的数量，从绝对位置切换到固定位置，并通过在浏览器动画帧上执行动画来优化您的解决方案。http://jsfiddle.net/7BFCM/7/这仍然是cpu intesive，所以我会谷歌的一些画布解决方案。 //www.techumber.com/2013/01/HTML5-Canvas-Tutorial-On-Creating-Snowfall-Effect.html –

你添加和删除很多在运行时页面上的元素，使得浏览器频繁刷新该页面的结构

的做法是：一旦足够的DIV已经产生，去除，生成，删除，产生，去除

你能做的最糟糕的事情性能明智
可能使得浏览器坠落到其膝盖... ...

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

我建议在开头预先生成所有的DIV，重新使用它们并使用CSS动画或jQuery animate()来完成您正在尝试的操作。

来源

2013-10-11 13:17:07

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

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

基本上，在任何给定时间创建屏幕上想要的雪花数量的元素。将它们全部放在随机位置的屏幕上以开始。然后，一旦雪花熄灭或不可见，那雪花就可以再次使用。所以你会将它移回顶端（可能位于另一个随机位置），并使它像雪花一样再次掉落（而不是删除它并创建一个新的）。

这是创建粒子发射器的一步。

来源

2013-10-12 09:14:48 SombreErmine

循环功能导致它在JavaScript中无响应

回答

相关问题