-4

好的，所以我有一个雪花落在屏幕上的小动画，我曾经setTimeout让它移动。我喜欢它目前的样子（至少在 Chrome 上），现在，我正在研究交叉兼容性，我正在研究 Firefox，它的运行速度非常缓慢。老实说，该setTimeout函数设置为 5ms，它每 5ms 仅移动 1px（速度为 200 fps），但我需要它以那个速度运行。是否有一些狡猾的技巧可以绕过它，Firefox 以什么速度重复该功能？另外，旁注：它甚至在 IE9 中都不起作用（我不关心 <8）。他们移动了一秒钟，到达屏幕底部，然后停止（我希望它在顶部重新启动）。
任何帮助将不胜感激！

我的代码（如果你想通过它）如果你不跳到"//begin actual function"：

var width = window.outerWidth;  
var height = window.outerHeight;  
//foreground  
var curWidth = width - 90;  
var h2 = height * 5;  
var tbvar;  
function TB() {  
//random flake  
var flakeSrc = ['images/1.png','images/2.png','images/3.png','images/4.png'];  
var randImg1 = Math.floor(Math.random() * flakeSrc.length );  
var randImg2 = Math.floor(Math.random() * flakeSrc.length );  
var randImg3 = Math.floor(Math.random() * flakeSrc.length );  
var randImg4 = Math.floor(Math.random() * flakeSrc.length );  
var randImg5 = Math.floor(Math.random() * flakeSrc.length );  
//random horizontal position array  
var left = [];  
var one = 1;  
do {  
        one++;  
        left.push(one)  
    }  
    while (one <= curWidth);  
    var rand1 = Math.floor(Math.random() * left.length );  
    var rand2 = Math.floor(Math.random() * left.length );  
    var rand3 = Math.floor(Math.random() * left.length );  
    var rand4 = Math.floor(Math.random() * left.length );  
    var rand5 = Math.floor(Math.random() * left.length );  
    //////////////begin actual function/////////////////////////////////////////////  
    clearTimeout(tbvar);  
    tbvar=setTimeout(function(){  
        //find top positions  
        var top1 = document.getElementById("flake1").offsetTop;  
        var top2 = document.getElementById("flake2").offsetTop;  
        var top3 = document.getElementById("flake3").offsetTop;  
        var top4 = document.getElementById("flake4").offsetTop;  
        var top5 = document.getElementById("flake5").offsetTop;  
        //add 1  
        top1++;  
        top2++;  
        top3++;  
        top4++;  
        top5++;  
        //change top positions  
        document.getElementById("flake1").style.top = top1 + "px";  
        document.getElementById("flake2").style.top = top2 + "px";  
        document.getElementById("flake3").style.top = top3 + "px";  
        document.getElementById("flake4").style.top = top4 + "px";  
        document.getElementById("flake5").style.top = top5 + "px";  
        //end of screen statements  
        if (top1 == height) {  
            //top1 == "-180px";  
            document.getElementById("flake1").style.top = "-180px";  
            document.getElementById("flake1").style.left = rand1 + "px";  
            document.getElementById('flake1').src = flakeSrc[randImg1];  
        }  
        if (top2 == height) {  
            //top2 == "-180px";  
            document.getElementById("flake2").style.top = "-180px";  
            document.getElementById("flake2").style.left = rand2 + "px";  
            document.getElementById('flake2').src = flakeSrc[randImg2];  
        }  
        if (top3 == height) {  
            //top3 == "-180px";  
            document.getElementById("flake3").style.top = "-180px";  
            document.getElementById("flake3").style.left = rand3 + "px";  
            document.getElementById('flake3').src = flakeSrc[randImg3];  
        }  
        if (top4 == height) {  
            //top4 == "-180px";  
            document.getElementById("flake4").style.top = "-180px";  
            document.getElementById("flake4").style.left = rand4 + "px";  
            document.getElementById('flake4').src = flakeSrc[randImg4];  
        }  
        if (top5 == height) {  
            //top5 == "-180px";  
            document.getElementById("flake5").style.top = "-180px";  
            document.getElementById("flake5").style.left = rand5 + "px";  
            document.getElementById('flake5').src = flakeSrc[randImg5];  
        }  
        TB();  
    }, 5);  
}  
TB();

如果您想查看整个项目的实际效果：http: //fudgepants.com/snow/snow.html

我说的是大雪花，而不是小雪花。
谢谢！

4

1 回答 1

1

对您的代码的一些评论：

function TB() {  
  //random flake  
  var flakeSrc = ['images/1.png','images/2.png','images/3.png','images/4.png'];

由于该数组是静态的，因此您应该将其放在函数之外，这样就不会在每次调用时创建它。

  var randImg1 = Math.floor(Math.random() * flakeSrc.length );

flakeSrc.length不会改变，所以存储长度并参考它。Math.floor此外，您可以使用按位 OR 运算符替换：

  var randImg1 = Math.random() * flakeSrc.length | 0;

.

do {  
        one++;  
        left.push(one)  
    }  
    while (one <= curWidth);

这似乎毫无意义，每次调用都这样做只会浪费大量 CPU 周期。left仅用于 value left.length，这将是相同的 value curWidth。

    var rand1 = Math.floor(Math.random() * left.length );

如上，left.length多次使用，与 相同curWidth，只是读取速度较慢。

等等...

为避免全局变量，请考虑将其全部包装在立即调用的函数表达式中。

于 2012-11-05T04:37:43.823 回答