Question

所以目前我有一个弹跳物体的动画，每秒播放20次

    1000/50 = 20 times a second

代码如下，您可以假设所有变量都已正确初始化

        var animation = setInterval(function () {
            currentFrame++;
            if (speedX <= 0.0) {
                clearInterval(animation);
            }
            speedX -= 0.03;
            speedY = (speedY + Math.sqrt((2 * currentFrame) / gravityPull));
            yPosition += speedY;

            if (yPosition > groundY) {
                speedY *= -1;
                yPosition = groundY;
            }
            xPosition += speedX;
            $("#box").offset({ top: yPosition, left: xPosition });

        }, 50);

这在IE中创造了非常好的表现，尽管Chrome在运行此代码时似乎完全没问题。实际上它太糟糕了，它会减慢计算机的运行速度。

这里有什么不对吗？似乎计算相当简单......帧速率不是很高，每秒20次并不是极端的，但仍然足够流畅，不会出现那么不稳定的动画。

Answer 1

新发现：Internet Explorer很糟糕。

嗯，至少IE8和更老。 IE9表现很好。

由setTimeout和setInterval触发的定时功能问题是浏览器尝试在时间到期时执行这些功能，但这实际上只有在它发生时才会发生闲。因为互联网Eplorer＆lt; 9是如此之慢，并且总是“迟到”，你可以理解为什么动画不好。

问题在于，每次执行“框架”时，IE8都需要50毫秒以上才能完成计算和DOM更改所导致的所有任务。

setInterval在IE 8中以每秒50次的速度缓慢

1 个答案: