Question

好的，所以我有一个小小的雪花动画落在屏幕上，我用setTimeout让它移动。我喜欢它到目前为止的样子（至少在Chrome上），而且现在，我正在研究交叉兼容性，而且我正在研究Firefox，而且它的速度非常慢。说实话，setTimeout函数设置为5毫秒，它每5毫秒只移动1个像素（速度为200 fps），但我需要它以这个速度运行。是否有一些狡猾的黑客来解决它，以及Firefox使该功能重复的速度是多少？另外，旁注：它甚至不能在IE9中工作（我不关心＆lt; 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

我所说的部分是大雪花，而不是小雪花谢谢！

Answer 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不会改变，所以存储长度并引用它。此外，您可以使用按位OR运算符替换Math.floor：

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

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

这似乎毫无意义，而且每次通话都是浪费大量的CPU周期。 left仅用于值left.length，其值与curWidth相同。

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

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

等等......

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

为什么Firefox使用setTimeout动画这么慢？

1 个答案: