ros*_*han 0 javascript timing setinterval
假设有一个函数x()可以做一些动画
如果我循环x(),说100次需要<1ms(平均/调用)来执行它但是,如果我这样做setInterval(x, 100),平均需要> 150ms才能执行
由于这种怪癖,我的动画很不稳定.(我的for-loop测试的原因是确保x()不是瓶颈)
是否有任何技术/模式可以确保我的计时器以同一时间和给定间隔被激发(以低间隔)并且不受浏览器的支配？
更新:为什么以下内容会针对不同的时间间隔给出不同的结果
http://jsfiddle.net/zQQgH/7/
更新2:感谢lincolnk,我已经为任何人更新了代码以查看它 http://jsfiddle.net/zQQgH/22/
不,你无法控制这个非常完美.
原因是JavaScript是单线程的,并且在一个线程中与浏览器UI一起工作.这意味着如果你编写setInterval(fn,30).您请求浏览器每30ms调用一次fn.但浏览器不会在这个确切的时间执行此操作.浏览器会将您的请求添加到队列中.
您可以在此处找到有关此行为的更多信息.
但我不认为,这是主要问题,为什么你的动画不稳定.要获得平滑的动画,您应该使用16到35毫秒之间的计时器.(最佳动画时间应为16.6666667.)
还有可能使用RequestAnimationFrame(此博客文章还有一些关于如何使用setInterval/setTimeout进行动画的额外信息).Paul Irish 为RequestAnimationFrame编写了一个简单的polyfill.
如果您仍有问题,只需使用HTML/CSS发布动画脚本即可.我可以调查一下.