一、用setTimeout做动画时每帧动画时间间隔设置为多少合适？
因为目前大多数电脑显示器的刷新频率是60HZ，大多数浏览器都会对页面重绘操作加以限制，使其不超过显示器的重绘频率；因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环时间间隔是1000/60s 约为16.7ms
所以一般用setTimeout做动画时间间隔设置为16.6ms是最佳的：setTimeout(function(){animateRun()},16.7)，
但即使是这样，用setTimeout设置的动画也会存在不流畅的情况，而为了解决这个问题requestAnimationFrame应运而生
二、requestAnimationFrame方法是专门为动画而生，采用系统时间间隔，保持最佳绘制效率,在运行时浏览器会自动优化方法的调用。
1.使用window.requestAnimationFrame(callback)简写为requestAnimationFrame(callback)；
2.和setTimeout或者setInterval一样requestAnimationFrame也有取消定时器的方法：cancelAnimationFrame
var timer = requestAnimationFrame(aimateRun); //aimateRun是自己定义的动画方法
cancelAnimationFrame(timer) //取消定时器
3.兼容 谷歌浏览器，火狐浏览器，IE10+
三、兼容方法
var s
=
0
,e
=
10
;
function animateRun
(){
// 要执行的动画
// style.width = ....
if
(s
< e
)
{
// 满足执行动画的条件在执行回调,本例用数字举例
s
++;
//如果支持requestAnimationFrame
if
(window
.requestAnimationFrame
)
{
window
.requestAnimationFrame
(animateRun
)
//不支持用setTimeout
}
else
{
setTimeout
(
function
(){animateRun
()},
16.7
)
}
}
}