requestAnimationFrame

最新推荐文章于 2025-03-04 13:51:16 发布

Xlling

最新推荐文章于 2025-03-04 13:51:16 发布

阅读量4.1k

点赞数 3

分类专栏： js

本文链接：https://blog.youkuaiyun.com/Xlling/article/details/84192545

版权

js 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了requestAnimationFrame和setInterval在动画制作中的应用及差异。setInterval按固定时间间隔执行，而requestAnimationFrame则同步于浏览器刷新率，更高效且在页面隐藏时自动暂停，节省CPU资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、requestAnimationFrame 和 setInterval

编写动画最关键的步骤是：确定时间间隔。间隔过短，无法保证浏览器的渲染能力；间隔过长，无法保证动画效果平滑流畅；
setInterval()方法按照指定的时间间隔（30ms）执行函数；[注意]HTML5标准规定，setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒。

var timer = null;
		timer = setInterval(function () {
			autoplay();
		},30);

clearInterval(timer);停止调用；
requestAnimationFrame()不需要设置时间间隔，是由系统的时间间隔定义的。大多数浏览器的刷新频率是60Hz(每秒钟反复绘制60次)，循环间隔是1000/60，约等于16.7ms。大多数浏览器会对反复挥着这个操作加以限制，不能超过60HZ，即使人为设置超过了该值，效果也不会改善。requestAnimationFrame()保证了最佳的绘制效率。

var render = function(){
	window.requestAnimationFrame(render);
	autoplay();
};

window.requestAnimFrame = (function() {
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
			return window.setTimeout(callback, 1000 / 60);
		};
})();

运行机制不同：
- setInterval()执行的时间不确定，该设置的时间间隔是将代码添加到异步队列中等待的时间。只有当主线程中的任务以及队列前面的任务是执行完毕，才真正开始执行动画代码；
- requestAnimationFramel()浏览器每刷新一次，动画代码执行一次，不会造成丢帧现象以及动画卡顿；
cpu的使用
- 当页面被隐藏或者最小化时，setInterval()仍在后台继续执行，这种动画刷新是完全没有意义的，对cpu也是极大的浪费；
- 当页面被隐藏或者最小化时，requestAnimationFramel()中页面的渲染会被系统暂停，当页面再次激活后，继续从上次停止地方继续绘制；