Question

在这个jsFiddle中我有一些动画：

/*Square / Triangle Animations*/
var triangleWaiting;
posTriangle = height - 100;
triangleDir = 1;
setInterval(function(){
    if(triangleDir == 1 && posTriangle >= 0) --posTriangle;
    if(triangleDir == 0 && posTriangle <= height - 100) ++posTriangle;
    if(!triangleWaiting){
        if(posTriangle >= height - 100) triangleDir = 1;
    } else {
        if(cubeDir == 0) triangleDir = 1;
    }
    if(posTriangle <= 0) triangleDir = 0;
    triangle.style['margin-top'] = posTriangle+'px';
}, 1);

cubeDir = 0;
posCube = 0;
setInterval(function(){
    if(cubeDir == 1 && posCube <= height - 200) --posCube;
    if(cubeDir == 0 && posCube >= 0) ++posCube;
    if(posCube <= 0) cubeDir = 0;
    if(posCube >= height - 200)  cubeDir = 1;
    cube.style['margin-top'] = posCube+'px';
}, 6);

/*Correct for error*/
setInterval(function(){
    if(triangleDir == cubeDir){
        triangleWaiting = true;
    } 
}, 1);

在Safari中，事情的移动速度稍慢，就像Chrome中的1微秒更快一样。发生了什么事？

Answer 1

您的1ms计时器不会正好是1ms。只要喜欢，浏览器就可以制作它。更长或更短。您应该测量并校正回调之间的ΔT。因此，您可以根据过去的时间向前运行动画。

浏览器之间的Javascript微秒计时器差异？

1 个答案: