2019-01-14 分类：JavaScript 作者：管理员 阅读（1358）
可能你还没见过这个东西是个啥，其实他就是类似于setTimeout和setInterval，然而它与setTimeout和setInterval又有所不同，requestAnimationFrame不需要设置时间间隔。这有什么好处呢？requestAnimationFrame有何神奇之处？本文将详细介绍HTML5新增的定时器requestAnimationFrame。
计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有能力渲染产生的变化。
大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms。
而setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行。
requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行
上面这段代码其中结果1则是requestAnimationFrame返回值，执行一遍返回1，如此类推，你可能疑惑为什么console.log(timer);中的timer没有加()也能执行，这得回到文章头部说到的你可以理解为requestAnimationFrame就是个定时器，定时器自然不需要手动去触发执行
1 2 3 4 5 | //控制台什么都不输出 var timer = requestAnimationFrame(function(){ console.log(0); }); cancelAnimationFrame(timer); |
1 2 3 4 |
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
谢谢你请我吃鸡腿*^_^*
支付宝
微信
下一篇：使用css3绘制任意角度扇形
唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与 
对的，记得还要留意下header中的flex-shrink属性
评：未知宽高不满一屏footer固定在底部这里主要是用了flex-grow属性吗?当子盒子高度小于父盒子高度时占据了父盒子剩余的空间,...
评：未知宽高不满一屏footer固定在底部嗯，语言没表达好，我去改下，我最后写的那段demo，是想体现数据不可变的思想，通过去单独加一...
评：js中map方法到底是否会改变原始数组？你最后还是写的map呀
评：js中map方法到底是否会改变原始数组？0基础手把手教怎么做主题的教程那得录制视频，光文字描述没多大用，录视频的话，正所谓台上三分钟...
评：未知高度div在屏幕上下左右居中fixed固定定位你从0开始教人制作一个简单的WP主题吧。估计比你这个文章受众更多。
评：未知高度div在屏幕上下左右居中fixed固定定位
共有 0 条评论 - 神奇的requestAnimationFrame【定时器】